宿州网站建设多少钱,广西壮族自治区医保网上服务大厅,自己如何建企业网站,国内做轮胎网站哪家好事件处理函数
绑定事件 绑定事件的处理函数#xff08;事件本身是存在的#xff0c;绑定的是相应的反馈#xff09;事件 事件的反馈 前端交互 #xff08;前端核心#xff09;
绑定事件的方式
1. 句柄绑定
默认#xff08;只能#xff09;是事件冒泡这种事件流为…事件处理函数
绑定事件 绑定事件的处理函数事件本身是存在的绑定的是相应的反馈事件 事件的反馈 前端交互 前端核心
绑定事件的方式
1. 句柄绑定
默认只能是事件冒泡这种事件流为某一个元素事件源指定了一个事件句柄onclick事件发生时要进行的操作
oDiv.onclick function(){} // 事件句柄 处理函数onclick绑定的事件处理函数内写的其他函数在非严格模式下指向的是window【该方式】一个元素、同一事件、只能绑定一个事件处理函数绑定多个取最后
2. 内联事件监听器
在html上绑定绑定执行不建议使用结构和逻辑应当分离这种按属性绑定的方式优先级更低会被js覆盖
3. 事件监听器
1 W3C规范但IE9以下不支持
注册事件监听器/绑定事件监听器可以绑定多个事件处理函数都能执行如果绑定了多次同一事件处理函数只会执行一次注意事件类型没有加on
elem.addEventListener(事件类型,事件处理函数,false);//false事件冒泡 true事件捕获// 2种都执行
oBtn.addEventListener(click,function(){this.innerHTML 加载中..
},false)
oBtn.addEventListener(click,function(){console.log(加载更多事件)
},false)oBtn.addEventListener(click,test,false);
oBtn.addEventListener(click,test,false);
function test(){console.log(1); // 打印1次
}2IE8及以下绑定方法
elem.attachEvent(事件类型,事件处理函数);注意事件类型加on
点击事件 IIFE
在绑定时console.log(i)并没有执行i没有保存绑定的函数在for循环结束后被执行点击了访问到的是5
var oLi document.getElementsByTagName(li),len oLi.length,item;
for (var i 0; i len; i) {(function (j) {item oLi[i];item.addEventListener(click, function () {console.log(i);}, false);}(i))
}3 事件处理程序的运行环境 / this
谁调用this就指向谁(attachEven是个特例this指向window)
4) 【兼容】封装绑定事件处理函数
function addEvent(el, type, fn) {if (el.addEventListener) {el.addEventListener(type, fn, false);} else if (el.attachEvent) {el.attachEvent(on type, function () {fn.call(el);})} else {el[on type] fn}
}5解除事件处理程序
// 句柄
element.onclicknull/false;// W3C规范事件监听器 add时怎么写remove就得怎么写
element.addEventListener(click,test,false);
element.removeEventListener(click,test,false)// IE8及以下事件监听器
element.detachEvent(onclick,test);非严格模式下可以使用方法4
function removeEvent(elem, type, fn) {if (elem.addEventListener) {elem.removeEventListener(type, fn, false)} else if (elem.attachEvent) {elem.detachEvent(on type, fn)} else {elem[on type] null}
}标签嵌套
内联元素写嵌套关系dom解析出来依然不是嵌套的a的特殊现象变成block依然不能嵌套
事件冒泡与捕获
dom结构中/嵌套结构中从内到外从下到上事件从子元素一层一层向上传递的现象是事件冒泡需绑定相同事件向上传递时父级有相同事件则触发关心的是事件而非事件处理函数事件捕获则顺序相反点击父元素一直捕获到事件源事件监听器true注意dom结构嵌套视觉上并不一定嵌套点击黄色事件捕获先于事件冒泡执行 点击红色红色是事件源事件源是按绑定顺序先后执行的非冒泡非捕获 focus、blur、change、submit、reset、select这些是没有捕获和冒泡事件的IE浏览器是没有事件捕获的除了Chrome以外的老版本浏览器都没有捕获新版的浏览器火狐、欧朋有捕获的主要和webkit blink内核有关系
取消冒泡
1. e.stopPropagation() (W3C) 2. e.cancelBuble true (IE)
attach的怎么取消
3. 【兼容】封装
function cacelBubble(e) {var e e || window.event;if (e.stopPropagation) {e.stopPropagation();} else {e.cancelBubble true;}
}取消默认事件
1. 阻止右键菜单弹出
1阻止右键菜单弹出 2W3Ce.preventDefault()IE9不兼容 3e.returnValue false function preventDefaultEvent(e) {var e e || window.event;if (e.preventDefault) {e.preventDefault()} else {e.returnValue false}
}2. a标签默认事件
跳转和刷新页面
// 1void(0)相当于return 0
a href javascript:void(0)百度一下/a
// 2
a href javascript:;百度一下/a
// 3锚点方式
a href #百度一下/a
// 4
a.onclick function(e){e.preventDefault();
}
举例
