事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮

clientX/Y 可视区的鼠标坐标全兼容

offsetX/Y 鼠标坐标到物体边框的距离 IE+Chrome

pageX/Y 页面高级浏览器

screenX/Y 屏幕全兼容(没用)

var e = evt || window.event;

evt作为参数兼容高级浏览器,window.event兼容低版本IE;(此处注意属性和变量eg:window.a和a,亲着是undefined,后者是is no difined)

添加事件的方法:

1 赋值的方法 ---document.onclick = function(){}; --->缺点:会覆盖;

取消事件的方法 document.onclick = null;

2 事件绑定------addEventListener(evname,fn,false)/attachEvent('on'+evname,fn);

兼容高级浏览器(false代表冒泡,true代表捕获) 兼容低版本IE(IE事件流只有冒泡)

取消绑定的方法 removeEventListener(evname,fn,false)/detachEvent('on'+evname,fn);

DOM事件必须用时间绑定添加;

注意事件绑定的函数,不能作为匿名函数,而是用函数名来取消绑定

3 事件委托利用事件冒泡,给父级加事件--->优点:1简化重复的函数代码2给未来的元素加事件

给父级添加事件委托,this变为父级,要通过var oSrc=oEvent.srcElement||oEvent.target;来获取事件源,IE和Chrome兼容srcElement , Firefox Chrome兼容target;Chrome都行

setCapture(),将所有的事件归集捕获给obj

releaseCapture()

取消事件冒泡的方法:

evt.stopPropagation();//非IE

window.event.cancelBubble = true;//IE中

兼容写法: window.event ? window.event.cancelBubble = true : evt.stopPropagation();

取消默认事件的方法:

evt.preventDefault(); 非IE

window.event.returnValue = false;/return false IE

return false阻止默认事件，遇到addEventListener会失效

*用preventDefault解决

ready事件

高级浏览器:

document.addEventListener('DOMContentLoaded', function (){

alert('ready');

}, false);

低版本IE:(有interactive 和complete)

document.attachEvent('onreadystatechange', function (){

if(document.readyState=='complete'){

alert('ready');

}

ready 的兼容写法:

function addReady(fn){

if(document.addEventListener){

document.addEventListener('DOMContentLoaded', fn, false);

}else{

document.attachEvent('onreadystatechange', function (){

if(document.readyState=='complete'){

fn();

}

});

}

滚轮事件:

wheelDelta IE、Chrome

上正

下负

detail Firefox

上负

下正

//IE、Chrome

/*oDiv.onmousewheel=function (){

alert('a');

};*/

//FireFox——DOMMouseScroll

oDiv.addEventListener('DOMMouseScroll', function (){

alert('a');

}, false); DOM事件必须用事件绑定

滚轮的兼容写法1

function wheel(ev){

var oEvent=ev||event;

var down;

if(oEvent.wheelDelta){

if(oEvent.wheelDelta<0){

down=true;

}else{

down=false;

}

}else{

if(oEvent.detail<0){

down=false;

}else{

down=true;

}

if(down){

alert('向下');

}else{

alert('向上');

}

if(window.navigator.userAgent.indexOf('Firefox')!=-1){

oDiv.addEventListener('DOMMouseScroll', wheel, false);

}else{

oDiv.onmousewheel=wheel;

}

//wheelDelta IE、Chrome

//上正

//下负

//detail Firefox

//上负

//下正

滚轮写法2 和3

function wheel(ev){

var oEvent=ev||event;

var down;

//down=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;

down=(oEvent.wheelDelta||-oEvent.detail)<0;

if(down){

alert('向下');

}else{

alert('向上');

}

if(window.navigator.userAgent.indexOf('Firefox')!=-1){

oDiv.addEventListener('DOMMouseScroll', wheel, false);

}else{

oDiv.onmousewheel=wheel;

}

关于相等的问题 -->只有字符串是静态的,不可变的;

//alert(12==12);

//alert('abc'=='abc');

//alert([1,2,3]==[1,2,3]);

//alert(new Array(1,2,3)==new Array(1,2,3));

//[1,2,3] => new Array(1,2,3)

//alert(12==12);

//alert('abc'=='abc');

alert({a: 12, b: 5}=={a: 12, b: 5});

//{a: 12, b: 5} => new Object()

//alert(12==12);

//alert('abc'=='abc');

/*var arr=[1,2,3];

arr[1]=4;

alert(arr);*/

var str='abc';

str[1]='d';

alert(str);

只有字符串是静态的,不可变的;

//alert(function (){alert('abc')}==function (){alert('abc')});

alert(new Function("alert('abc')")==new Function("alert('abc')"));

/*var show=function (){

alert('abc');

};*/

//var show=new Function("alert('abc');");

//show();

转载于:https://www.cnblogs.com/gulinsai/p/6959097.html

事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮相关推荐

浏览器事件捕获冒泡以及阻止冒泡
浏览器事件捕获冒泡以及阻止冒泡一.浏览器的dom事件流 dom事件流有三个阶段,捕获阶段->目标阶段->冒泡阶段,不管是有没有绑定事件,只要发生点击事件,事件的处理将从DOM层次的根开始 ...
Mr.J--JS事件监听(捕获冒泡)
目录 addEventListener 取消绑定事件 removeEventListener 事件捕获&冒泡事件冒泡事件捕获事件捕获和事件冒泡同时存在 1.捕获在前 2.冒泡在前注意 ...
JavaScript 详说事件流（冒泡、捕获、传播、委托）
事件流事件流描述的是从页面中接收事件的顺序. 标准DOM事件流存在三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 事件捕获:当触发事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元 ...
事件冒泡 vs 事件捕获 vs 事件委托的区别
事件冒泡 vs 事件捕获 vs 事件委托本主要用于理解这JS的这三种事件的专业术语所表述的意义: 在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览 ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
事件委托、事件冒泡与事件捕获
目录事件委托: 1.原理 2.实现 ①在介绍事件委托的方法之前,我们先来看一段一般方法的例子: ②那么我们用事件委托的方式做又会怎么样呢? ③要是每个li被点击的效果都不一样,那么用事件委托还有用吗 ...
事件对象，事件流（事件冒泡和事件捕获）、事件委托、L0和L2注册等相关概念及用法
事件对象 1. 事件对象是什么? 这个对象包含事件触发时的相关信息.如:鼠标点击事件中,事件对象就存了鼠标点击时的位置信息等. 2. 事件对象在哪里? 在事件绑定的回调函数的第一个参数就是事件对象,一 ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...

事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮

事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮相关推荐

最新文章

热门文章