脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-私人定制javascript事件处理(浅谈)，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 看到园子里关于事件监听发表的文章，我都有点不好意思写了。不过想想我的题目以私人定制作开头也就妥妥地写吧。
事件相关概念
1.事件类型 发生事件的字符串
有传统事件类型 比如表单、window事件等
DOM事件类型
触摸屏和移动设备事件类型 例如touchmove
2.事件目标 Window/Document/Element/XMLHttPRequest/...
3.事件对象 与特定事件相关且包含有关事件详细信息的对象 就是大家熟悉的event
4.事件传播 浏览器决定哪个对象触发其事件处理程序的过程 有冒泡阶段和处于阶段和捕获阶段
注册事件处理程序
1.设置事件目标的属性为所需事件处理程序函数
例如dom1.onclick=function(){/*....*/};
2.设置HTML标签属性为事件处理程序
例如
<p onclick='alert('我的小苹果');'/>
但实际javascript引擎做了如下加工:相当于将作用域前置了,表示对wITh理解不是很深。
复制代码
function(event){
with(document){
with(this.form||{}){
with(this){
/*这里是编码*/
}
}
}
}
复制代码
最后给出的建议是：建议js代码与html分开，因为这样才符合html与javascript各自的职责
事件处理程序的运行环境
1.通过属性注册处理程序时,例如e.onclick=function(){/**/} this 是指事件目标对象
2.对于attachEvent()此时的this指window对象 所以可以参考下列代码
复制代码
function addEvent(target,tyPE,handler)
{
if(target.addEventListener)
target.addEventListener(type,handler,false);
else
target.attachEvent("on"+type,
function(event){
return handler.call(target,event);
});
}
复制代码
事件处理程序的返回值
很多返回值为false的可以阻止浏览器默认操作，比如链接的跳转，如果return false可以阻止跳转
事件调用顺序
1.通过设置对象属性或HTML属性注册的处理程序一直优先调用
2.addEventListener()注册的处理程序按照它们的注册顺序调用
3.attachEvent()注册的处理程序可能按照任何顺序调用
谈到事件调用顺序，这里不得不说的就是
DOM2级事件规定事件包含三个阶段
1.事件捕获阶段
2.处于目标阶段
3.事件冒泡阶段
此处借用https://www.cnblogs.COM/yexiaochai/p/3567597.html的例子并膜拜其发现
复制代码
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
#c { width: 200px; height: 200px; border: 1px solid red; }
#sub { width: 100px; height: 100px; border: 1px solid red; }
</style>
</head>
<body>
<p id="p">
parent
<p id="c">
child
</p>
</p>
<script type="text/javascript">
window.alert = function (msg) {
console.LOG(msg);
};
VAR p = document.getElementById('p'),
c = document.getElementById('c');
p.addEventListener('click', function (e) {
alert('父节点冒泡')
}, false);
c.addEventListener('click', function (e) {
alert('子节点捕获')
}, true);
c.addEventListener('click', function (e) {
alert('子节点冒泡')
}, false);
p.addEventListener('click', function (e) {
alert('父节点捕获')
}, true);
</script>
</body>
</html>
复制代码
结果如下
//父节点捕获
//子节点捕获
//子节点冒泡
//父节点冒泡
先按照DOM2执行但是如果到了2.处于阶段此时若绑定了捕获又绑定了冒泡那么按照注册顺序执行
所以如果是下列代码
复制代码
p.addEventListener('click', function (e) {
alert('父节点冒泡')
}, false);
c.addEventListener('click', function (e) {
alert('子节点冒泡')
}, false);
c.addEventListener('click', function (e) {
alert('子节点捕获')
}, true);
p.addEventListener('click', function (e) {
alert('父节点捕获')
}, true);
复制代码
那么答案是多少呢？
//父节点捕获
//子节点冒泡
//子节点捕获
//父节点冒泡
鼠标事件
除了mouseenter和mouseleave外的所有鼠标事件都能冒泡
事件取消
通过事件对象(event)的preventDefault()/returnValue=false(IE)
事件对象的stopPropagation()可以在事件传播的任何时间调用，无论是捕获阶段、事件目标本身中和冒泡阶段
就是阻止事件的进一步传播，不管捕获也好还是冒泡也好
/cancelBubble=true(IE)只能取消冒泡事件传播
文档加载事件
当文档加载解析完毕且有所延迟(deferred)脚本执行完毕时会触发DOMContentLoaded事件，此时图片和异步(async)脚本
可能依旧在加载，但是文档已经为操作准备就绪了。
在IE中，每次状态改变都伴随着Document.readystatechange事件
那么document.readyState属性随着文档加载过程而变如果是complete则表示文档就绪
这里readystatechange执行顺序早于DOMContentLoaded早于load
但是readystatechange会多次轮询调用，我猜的没有验证。
文档准备就绪封装的函数
复制代码
var whenReady = (function () {
var funcs = [];
var ready = false;
function handler(e) {
if (ready) return;
//此处是为了readystatechange事件做的判断，如果document.readyState === "complete"说明所有的文档准备就绪包括图片
//和外部请求的资源的那个
if (e.type === "readystatechange" && document.readyState !== "complete") {
return;
}
for (var i = 0; i < funcs.length; i++) {
funcs[i].call(document);
}
ready = true;
funcs = null;
};
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", handler, false);
document.addEventListener("readystatechange", handler, false);
window.addEventListener("load", handler, false);
}
else if (document.attachEvent) {
document.attachEvent("onreadystatechange", handler);
window.attachEvent("onload", handler);
}
return function whenReady(f) {
if (ready) f.call(document);
else funcs.push(f);
}
}());
function fn() {
console.log("fn is exec");
}
document.addEventListener("DOMContentLoaded", fn, false);
whenReady(fn);
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-私人定制javascript事件处理(浅谈)全部内容，希望文章能够帮你解决javascript代码实例教程-私人定制javascript事件处理(浅谈)所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。