讲师中心 微信公众号
AI工具推荐 视频效率加速

javascript 跨浏览器开发经验总结(五) js 事件_javascript技巧

雨婷吖_6911

雨婷吖_6911

发布时间:2016-05-16 18:26:56

|

1124人浏览过

|

来源于php中文网

原创

简单事件模型和高级事件模型

简单事件模型和高级事件模型简单事件,就是事件与页面元素直观的绑定在一起的形式,如:
复制代码 代码如下:


element.onclick = function(){alert(this.innerHTML);}

只要不是用了个别浏览器独有的事件,一般的click,mouseover事件等在各浏览器中都可以这么使用。

但是当一个事件需要绑定多个监听,或者需要动态注册/移出监听时,简单事件模型就不够用了,需要使用高级事件模型(IE和其他浏览器在使用高级事件模型时就有区别了):
复制代码 代码如下:

//注册
function addEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.attachEvent('on' + evtName, callback);
}
}

//移除
function removeEventHandler(element, evtName, callback, useCapture) {
//DOM标准
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture);
} else {
//IE方式,忽略useCapture参数
element.dettachEvent('on' + evtName, callback);
}
}



标签中onclick事件与href属性的调用顺序关系
在a标签响应点击事件时,会先进行onclick事件的响应,再执行href中的跳转方法。如以下标签点击后会先后提示“button”和“href”:

button

但是,最好不要在href中定义具体的javascript方法,因为这个是定义跳转的链接地址的属性,如果需要先后执行两个javascript方法,应该这样写:

button

但是上面的写法中如果onclick绑定的响应方法中并没有提交请求跳转至别的页面,那么会发现当前网页做了一次刷新,因为以上代码中href=“#”表示跳转到当前页的顶部,但是并没有发出新的html请求。有的时候,我们并不希望页面在响应onclick事件后又跳回顶部(尤其是页面高度较长,出现滚动条,并且该链接位于页面底部时,跳转至顶部后用户还需要拖动滚动条找回原来位置继续操作时),那么应该在onclick后返回false值,阻止继续进行href定义的动作,如:

button

或者将#替换成空的javascript语句:

button


onload事件的调用顺序

有的时候在页面初始化时需要调用一些脚本来设置页面元素的初始状态,最标准的做法是用方式或者document.onload方式调用。onload的事件的触发会在页面元素渲染完毕之后调用,这样就保证了不会出现脚本执行时找不到未渲染的页面元素的情况。如果是在区域的<script>块中执行脚本,并使用了页面元素时,就很有可能出现找不到元素的错误。如果是在<body>区域的<script>块中执行脚本,只能使用该<script>块之前的页面元素,因为<body>区域的元素基本是顺序解析的。 <br><br><BR><STRONG>onchange事件 <br><br><input>元素和<select>的<option>元素都支持onchangge事件,但是经常我们会发现元素的内容值变化了却没有触发onchangge事件。这是因为onchange事件的触发还有另一个条件:当前元素处于失去焦点(onblur)的状态。所以,onchange事件只能捕获用户操作时的值变化,对于使用javascript脚本动态改变元素value的情况,它是捕获不到的。 <br><br><STRONG>事件截获 <br><br>因除了IE之外的浏览器不能识别window.event所以要使用以下方式来获取当前事件和事件发生的目标元素: <BR>var evt = e?e:(window.event?window.event:null); <BR>var el = evt.srcElement?evt.srcElement:evt.target;<br><br>这里有一些其它相关的文章,非常值得参考下<BR><A href="http://www.jb51.net/article/22014.htm" target=_blank>JavaScript Event事件学习第一章 Event介绍 <BR><A href="http://www.jb51.net/article/22763.htm" target=_blank>javascript 跨浏览器的事件系统 </script>

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

小橡皮AI

一款AI工具,主要用于小橡皮一键去AI味,将机器味重的内容改得更有活人感,防止因为 AI 内容被平台打上 AI 标签,以及限流,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

相关专题

更多
Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

20

2026.10.28

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

40

2026.10.28

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

140

2026.10.22

Gradle Wrapper配置教程
Gradle Wrapper配置教程

本专题介绍Gradle Wrapper的基本作用,涵盖文件组成、生成方法、版本配置和任务调用,帮助你理解项目如何使用指定的Gradle版本,减少不同开发环境带来的构建差异。

80

2026.10.22

Golangci-lint检查器使用教程
Golangci-lint检查器使用教程

本专题整理Golangci-lint常用Linters的用途与配置方法,覆盖错误处理、无效代码、安全、复杂度、命名和依赖检查,帮助项目合理选规则。

80

2026.10.22

Gradle怎么构建Java项目
Gradle怎么构建Java项目

本专题介绍Gradle Java项目构建方法,涵盖Java插件配置、依赖声明、源码编译、测试执行和打包检查,帮助你理解各阶段的任务关系,逐步完成项目构建。

40

2026.10.22

PHP时间戳漏洞修复教程
PHP时间戳漏洞修复教程

本专题汇总PHP常见时间戳漏洞,包括2038年溢出、时区漂移、时间戳伪造、重放攻击、时间盲注与日志审计失效等,并给出升级64位环境、使用 DateTimeImmutable、统一UTC、严格超时校验、预处理绑定、hash_equals 比对等修复方案,帮助开发者快速排查和加固时间相关代码。

80

2026.10.22

Golangci-lint配置文件与规则设置
Golangci-lint配置文件与规则设置

本专题聚焦Golangci-lint YAML配置文件,讲清运行参数、规则启停、目录排除、问题过滤及严重级别设置,便于团队统一检查标准。

40

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn