事件绑定与移除
js中事件绑定
1. 在元素标签中绑定事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style type="text/css">
#div1 {
width: 500px;
height: 500px;
background-color: red;
}
style>
head>
<body>
<div id='div1' onclick="fn()">div>
<script type="text/javascript">
function fn() {
console.log(111); // 111
}
script>
body>
html>
2. 通过onxxx()绑定事件：这种方式绑定的事件，同一个元素的同一种事件多次绑定，后面的事件会覆盖前面的事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style type="text/css">
#div1 {
width: 500px;
height: 500px;
background-color: red;
}
style>
head>
<body>
<div id='div1'>div>
<script type="text/javascript">
var obj = document.getElementById("div1");
obj.onclick = function() {
console.log(11);
};
obj.onclick = function() {
console.log(22);
};
// 只会输入22
// 移除事件 obj.onclick = null
script>
body>
html>
3. obj.addEventListener()绑定事件监听
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style type="text/css">
#div1 {
width: 500px;
height: 500px;
background-color: red;
}
style>
head>
<body>
<div id='div1'>div>
<script type="text/javascript">
// addEventListener方法在ie8及以下不支持，ie8中可以使用attachEvent()
/*
* 事件注册兼容写法，参数如下：
* ele：dom元素
* type：事件类型
* fn：处理函数
*/
function addEvent(ele, type, fn) {
if(ele.addEventListener) {
ele.addEventListener(type, fn, false);
}else {
ele.attachEvent('on' + type, fn);
}
}
var obj = document.getElementById("div1");
addEvent(obj, 'click', function() {
console.log(222);
})
// 移除事件
// addEventListener --> removeEventListener
// attachEvent --> detachEvent
script>
body>
html>
jquery中事件绑定
1. on()
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script>
<style type="text/css">
#div1 {
width: 500px;
height: 500px;
background-color: red;
}
style>
head>
<body>
<div id='div1'>
<span id="span1">hello worldspan>
<span id="span2">hello worldspan>
div>
<script type="text/javascript">
/*
* 语法：$(selector).on(event,childSelector,data,function)
* 参数如下：
* event：事件类型
* childSelector： 可选，绑定到指定子元素
* data： 传入到函数的额外参数
* function：处理函数
*/
$('#div1').on('click', '#span1', function() {
console.log(111)
})
// 移除事件 off()
script>
body>
html>