事件

注册事件

给元素添加事件,为注册事件或者绑定事件

注册事件两种方式

  1. 传统方式
  2. 监听事件方式

事件监听
  • addEventListener() 事件监听 (IE9以上)
eventTarget.addEventListener(type, listener, [useCapture])
  1. 参数type:            事件类型字符串,不要on 如click,mouseover
  2. 参数listener:       事件处理函数,触发的时候要做的事情
  3. 参数useCapture: 可选,是一个布尔值,默认false
  • attacheEvent() 事件监听 (IE678支持)
evetagrget.attachEvent(eventNameWithOn, callback)

  1. 参数eventNameWithOn: 事件类型字符串,不要on 如click,mouseover
  2. 参数callback:                   事件处理函数,触发的时候要做的事情
<body>
<button>传统注册事件</button>
<button>addEventListener ie9以上</button>
<button>attachEvent ie678</button>
<script>
var btns = document.querySelectorAll('button');
// 传统注册事件
btns[0].onclick = function () {
alert('传统方式')
};
// addEventListener 添加多个不覆盖
btns[1].addEventListener('click', function () {
alert('ddEventListener ie9以上')
});
btns[1].addEventListener('click', function () {
alert('ddEventListener ie9以上---2')
}); //attachEvent
btns[2].attachEvent('click', function () {
alert('attachEvent')
})
</script>
</body>

示例代码

删除事件
  • 传统方式
btns.onclick = null
  • 方式删除监听事件
eventTarget.removeEventListener(type, listener, [useCapture])

  1. 参数type:            事件类型字符串,不要on 如click,mouseover
  2. 参数listener:       事件处理函数,触发的时候要做的事情
  3. 参数useCapture: 可选,是一个布尔值,默认false
<body>
<button>addEventListener ie9以上</button>
<button>attachEvent ie678</button>
<script>
var btns = document.querySelectorAll('button');
// addEventListener 添加多个不覆盖
btns[0].addEventListener('click', fn);
function fn() {
alert(222);
this.removeEventListener('click', fn)
} //attachEvent
btns[1].attachEvent('click', fn1);
function fn1() {
alert(111);
this.detachEvent('click', fn1)
} </script>
</body>

示例代码

事件冒泡
  • onblur,onfocus,onmouseenter,onmouseleave 没有冒泡

dom 事件流,在js代码中

  1. 只能执行捕获或者冒泡其中的一个阶段;
  2. onclick 和 attachEvent(ie) 只能得到冒泡阶段;
  3. 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son;
  4. 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html –> document
<div class="father">
<div class="son">son盒子</div>
</div>
<script> var son = document.querySelector('.son');
// 给son 注册点击事件
son.addEventListener('click', function () {
alert('son');
}, true); // true--> 捕获阶段,flase---> 冒泡阶段 // 给father注册单击事件
var father = document.querySelector('.father');
father.addEventListener('click', function () {
alert('father');
}, true); // 给document 注册单击事件
document.addEventListener('click', function () {
alert('document');
}, true) </script>

事件捕获代码

<div class="father">
<div class="son">son盒子</div>
</div>
<script> var son = document.querySelector('.son');
// 给son 注册点击事件
son.addEventListener('click', function () {
alert('son');
}, false); // true--> 捕获阶段,flase---> 冒泡阶段 // 给father注册单击事件
var father = document.querySelector('.father');
father.addEventListener('click', function () {
alert('father');
}, false); // 给document 注册单击事件
document.addEventListener('click', function () {
alert('document');
}) </script>

事件冒泡代码

事件对象
  • 事件触发发生时会产生事件对象,并且系统会以实参形式传给事件处理函数
<body>
<div>123</div>
<script>
var div = document.querySelector('div');
div.onclick = function (event) {
// event 就是事件对象, 形参
event = event || window.event; // 兼容性问题
console.log(event);
} </script>
</body>

示例代码

事件对象属性和方法:

e.target和this区别

<body>
<div>123</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function (e) {
console.log(e.target); // 一致
console.log(this); // 一致
}); var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
console.log(e.target); // 谁触发的就说谁, 这里是li
console.log(this); // 我们给ul 绑定了事件 那么this 就指向ul
})
</script>
</body>

示例代码

阻止默认行为

html的一种默认行为

<body>
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com">
<input type="submit" value="提交" name="sub">
</form>
<script>
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault() // dom 标准行为,组织默认提交行为
}); // 传统方式阻止默认行为
a.onclick = function (e) {
e.preventDefault();
return false // 我们可以利用return false 也能阻止默认行为 没有兼容性问题
}; var from = document.querySelector('form');
from.addEventListener('click', function (e) {
e.preventDefault()
})
</script> </body>

示例代码

阻止事件冒泡

e.stopPropagation()

<body>
<div class="father">
<div class="son">son儿子</div>
</div> <script>
var son = document.querySelector('.son');
var father = document.querySelector('.father'); son.addEventListener('click', function (e) {
alert('son');
e.stopPropagation(); // 阻止事件冒泡
},false); father.addEventListener('click', function (e) {
alert('father');
}, false); document.addEventListener('click', function (e) {
alert('document')
}) </script> </body>

示例代码

事件委托

给父元素注册事件,利用事件冒泡,当子元素的事件触发,会冒泡到父元素,然后去控制相应的子元素。

<body>
<ul>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
<li>知否知否,点我应有弹框在手!</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'red'; // 事件委托
})
</script>
</body>

示例代码

常用鼠标事件

鼠标事件对象

<script>
document.addEventListener('click', function (e) {
// 1. client 鼠标在可视区的x和y坐标
console.log(e.clientX);
console.log(e.clientY);
console.log('---------------------'); // 2. page 鼠标在页面文档的x和y坐标
console.log(e.pageX);
console.log(e.pageY);
console.log('---------------------'); // 3. screen 鼠标在电脑屏幕的x和y坐标
console.log(e.screenX);
console.log(e.screenY);
}) </script>

示例代码

相关代码: https://github.com/1515806183/html-code/tree/master/wapapi-01

JavaScript DOM–事件操作的更多相关文章

  1. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  2. JavaScript Dom 事件

    JavaScript  Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...

  3. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

  4. dom事件操作例题,电子时钟,验证码,随机事件

    dom事件操作 当事件发生时,可以执行js 例子: 当用户点击时,会改变<h1>的内容: <h1 onClick="this.innerHTML='文本更换'"& ...

  5. JavaScript DOM 事件模型

    JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...

  6. 前端JavaScript之DOM事件操作

    DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. 1.DOM(Document Object Moduel):文档对象模型 定义了访问和操作HTML文档的标准法,把HT ...

  7. JavaScript DOM事件模型

    早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...

  8. JavaScript DOM 常用操作

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

  9. DOM事件操作

    DOM事件:对事件做出反应 当事件发生时,可以执行 JavaScript,比如:点击时 onClick="" 例:当用户点击时,会改变 <h1> 元素的内容: < ...

随机推荐

  1. HDU_1166_树状数组

    http://acm.hdu.edu.cn/showproblem.php?pid=1166 树状数组入门题. #include<iostream> #include<cstring ...

  2. Qt 中 this->size() this->rect() event->size() 三者差异

    测试代码: void OsgEarthGraphicsView::resizeEvent(QResizeEvent* event) { //if (scene()) //{ // scene()-&g ...

  3. Java 添加、读取、删除Excel文档属性

    在文档属性中,可以设置诸多关于文档的信息,如创建时间.作者.单位.类别.关键词.备注等摘要信息以及一些自定义的文档属性.下面将通过Java程序来演示如何设置,同时对文档内的已有信息,也可以实现读取和删 ...

  4. The related functions and attributes for managing attributes - 操作属性的重要属性和函数

    特性 property 都是类属性(静态变量),但是特性管理的其实是实例属性的存取, ****** 回顾 -'类方法' classmethod 和 '静态方法' staticmethod 皆可以访问类 ...

  5. malloc返回地址的对齐问题

    http://man7.org/linux/man-pages/man3/malloc.3.html RETURN VALUE         top The malloc() and calloc( ...

  6. k8s系列---StorageClass

    介绍这个概念前,需要提前知道存储卷pv/pvc之类的概念. 之前的文章有关于EFK日志系统的介绍,里面的环境是测试环境,完全按照教程一步步的操作,甚至注释掉了持久化存储,当真正线上部署时,又抓虾,打开 ...

  7. centos6.5下编译安装单实例MySQL5.1

    MySQL5.1版本安装3步曲: 1) ./config 指定编译安装参数 2) make 3) make install 查看系统版本号 [root@meinv01 ~]# cat /etc/red ...

  8. React中setState注意事项

    setState是一个异步函数,异步获取数据 学习react在使用ref和setState操作DOM时会遇到的问题: ref获取ul结点元素 错误写法:得到的ul长度总是上一次输入后的长度 结果: 正 ...

  9. 与WinRT组件进行操作

    1,原理: WinRT是一个新的类库,应用程序可以用它访问操作系统的功能. 在内部,WinRT以组件的形式实现.COM Component Object Model- WinRT使用.net元数据来描 ...

  10. ES6 - 报错整理(1): Unexpected end of JSON input while parsing near '...es":"7.0.0-alpha.11",'

    npm install --save-dev 安装 babel-preset-env时一直报错 Unexpected end of JSON input while parsing near '... ...