06 JS的事件（Event）

来源：互联网发布：nga178魔兽世界数据库编辑：程序博客网时间：2024/06/05 07:42

1、事件介绍

事件：用户的行为所触发的效果，DOM使JavaScript有能力对HTML事件做出反应。

HTML事件例子：

当用户点击鼠标时；

当网页已加载时；

当图像已加载时；

当鼠标移动到元素上时；

当输入文字改变时；

当提交的HTML表单时；

当用户触发按键时

常见事件：

2、监听事件

监听函数是事件发生时，程序所要执行的函数。它是事件驱动编程模式的主要编程方式。DOM提供三种方法，可以用来为事件绑定监听函数。

HTML点击事件：HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。

DOM 0级事件：元素节点由事件属性，可以监听函数。

DOM 2级事件：定义事件的监听函数。

3种方式的区别：

方式1：监听函数后面覆盖前面。

<body>    <div id="div2"style="background-color:orange;width:100px;height:100px;"onclick="click1()"div></body><script>    function click1(){        alert("click1");    }    function click1(){        alert("click1-1");    }   // click1-1</script>

方式2：相同的事件监听函数定义，后面的覆盖前面的。

<body>    <div id="div1"style="background-color:orange;width:100px;height:100px;"></div></body><script>    vardiv1 = document.getElementById("div1");    div1.onclick= function () {        alert("click1");    }    div1.onclick= function () {        alert("click2");    }    // click2 </script>

方式3：相同的事件监听函数的定义不会产生覆盖

<body>    <div id="div1"style="background-color:orange;width:100px;height:100px;"></div></body><script>    div1.addEventListener("click",function() {        alert("click1");    },false);    div1.addEventListener("click",function() {        alert("click2");    },false);    //click1 click2</script>

2.1事件捕获&冒泡

事件捕获：当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡：当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

W3C模型：默认是事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

<body>    <div id="div1" style="background-color: orange;width:100px;height: 100px;">        <div id="div2" style="background-color: darkgoldenrod;width:40px;height: 40px;"></div>    </div></body><script>    // test1:默认是事件冒泡    var div2 = document.getElementById("div2");    div2.onclick = function () {        alert("里面");    }    var div1 = document.getElementById("div1");    div1.onclick = function () {        alert("外面");    }    //点击div2 -- > 里面，外面    //test2:事件捕获    var div2 = document.getElementById("div2");    div2.addEventListener('click',function () {        alert("里面")    },true);    var div1 = document.getElementById("div1");    div1.addEventListener('click',function () {        alert("外面")    },true);    //点击div2  -- > 外面, 里面    //点击div1  -- > 外面    //test3:事件冒泡    var div2 = document.getElementById("div2");    div2.addEventListener('click',function (event) {        alert("里面");    },false);    var div1 = document.getElementById("div1");    div1.addEventListener('click',function () {        alert("外面");    },false);    //点击div2  -- > 里面，外面    //点击div1  -- > 外面</script>

2.2阻止事件传播

• 在W3c中，使用event.stopPropagation（）方法
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

见《javaScript Event》的描述。。。

Ps:在IE下设置cancelBubble = true；【老版的IE】

2.3阻止事件默认行为

使用event.stopPropagation（）方法

3、JavaScript event

事件发生以后，会生出一个事件对象，作为参数传给监听函数。浏览器原生提供一个Event对象，所有的事件都是这个对象的实例，或者说继承了Event.prototype对象。

3.1获取需要的参数

举例：使用console.log(event)输出鼠标点击事件。

常用的参数有：

表示鼠标距离屏幕左上角的位置：screenX、screenY

clientX、clientY：表示鼠标距离浏览器窗口左上角的位置（与页面是否横向滚动无关）

有垂直滚动条时，相对于垂直滚动条滑到顶部的左上角的位置

3.2Event常用属性和方法

（1）target属性：返回触发事件的那个节点，即事件最初发生的节点。

（2）preventDefault方法：取消浏览器对象当前事件的默认行为，比如点击链接，浏览器跳转到指定页面，或者按一下空格键，页面向下滚动一段距离。

（3）stopPropagation方法：阻止事件在DOM中继续传播，防止触发定义在别的节点上的监听函数，但不包括当前节点上新定义的事件监听函数。

还有其他属性：可自行通过console.log查看。

应用1：阻止浏览器默认行为

 <a href="http://www.baidu.com">跳转到百度</a></body><script>    //阻止浏览器默认行为    var aObj = document.getElementsByTagName("a")[0];    aObj.onclick = function(event){        alert("a")        event.preventDefault();    }    //没有跳转到百度</script>

应用2：阻止事件的传播

<body>    <div id="div1" style="background-color: orange;width:100px;height: 100px;">        <div id="div2" style="background-color: darkgoldenrod;width:40px;height: 40px;">        </div>    </div></body><script>    //阻止事件的传播    var div2 = document.getElementById("div2");    div2.addEventListener('click',function (event) {        alert("里面");        event.stopPropagation();    },false);    var div1 = document.getElementById("div1");    div1.addEventListener('click',function () {        alert("外面")    },false);    //点击div2  -- > 里面    //点击div1  -- > 外面</script>

应用3：获取当前节点的信息

<body>    <a href="http://www.baidu.com">跳转到百度</a></body><script>    //获取当前节点的信息    var aObj = document.getElementsByTagName("a")[0];    aObj.onclick = function(event){        alert("a")        event.target.innerHTML = "跳转到百度开发者平台";        event.target.href="https://app.baidu.com/";    }</script>

ps：<a href="http://www.baidu.com"onclick="javascript:void(0)">跳转到百度</a>
javascript:void（0）

void是无返回值的操作，点击这个时候没有任何反应。而且如果在a标签中，如果href="#"，点击后会回到网页顶部，javascript:void(0)会没有任何反应

3.3Event对象的一些兼容性写法

· 获得event对象兼容性写法
event|| (event = window.event);

· 获得target兼容型写法
event.target||event.srcElement

· 阻止浏览器默认行为兼容性写法
event.preventDefault? event.preventDefault() : (event.returnValue = false);

· 阻止冒泡写法
event.stopPropagation? event.stopPropagation() : (event.cancelBubble = true);

阻止默认事件

if(e&&e.stopPropagation){

e.preventDefault();

}else{

window.event.returnValue = false;

}

阻止事件传播

if(e&&e.stopPropagation){

e.stopPropagation();

}else{

window.event.cancelBubble = true;

}

阅读全文

0 0