JavaScript DOM事件进阶及相关练习
Posted 开到荼蘼223's
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript DOM事件进阶及相关练习相关的知识，希望对你有一定的参考价值。
事件
事件：事件是指可以被javascript侦测到的行为，是一种“触发-响应”的机制。这些行为指的就是页面的加载、鼠标单击页面、键盘输入等具体的动作，是实现页面交互的方式。
事件的三要素
- 事件源：触发事件的元素 (谁触发了事件)
- 事件类型：如click单击事件 (触发了什么事件)
- 事件处理程序: 事件被触发后所执行的代码(函数形式)，也称为事件处理函数
<body>
<button type="button" id="btn">单击事件</button>
<button type="button" id="btn">单击</button>
<script>
//获取按钮的对象
var btn = document.getElementById('btn');// 事件源
//给按钮对象绑定事件
btn.onclick = function(){// 事件类型为click
alert('单击了按钮');// 事件处理程序
}
</script>
</body>
事件注册
事件注册又称为事件的绑定，
传统方式
DOM对象.事件名 = 事件处理程序
btn.onclick = function(){
事件处理程序
}
缺点：同一个对象的同一个事件只能注册一个事件处理程序，后面注册的程序会将前面注册的程序覆盖掉(唯一性)
事件监听方式
同一个对象的同一个事件可以添加多个事件处理程序
早期浏览器
DOM对象.attachEvent(type,callback)
//type参数：表示事件的类型 如click、change、focus等
//callback参数：是回调函数 表示事件处理程序
标准浏览器
DOM对象.addEventListener(type,callback,[capture])
//type参数：表示事件的类型 如click、change、focus等
//callback参数：是回调函数 表示事件处理程序
//capture参数：可选参数,用来指定事件处理的方式：true表示事件在捕获阶段处理 如果是false表示事件冒泡阶段处理 默认为false
删除事件
DOM对象.事件名 = null
DOM对象.detachEvent(type,callback) //早期版本浏览器的删除
DOM对象.removeEventListener(type,callback) // 标准浏览器的删除
事件对象
事件对象：当事件被触发后由系统自动生成，它是与事件有关的数据信息的集合，在标准浏览器中会将一个event对象直接传入到事件处理程序中，而早期版本的IE浏览器（IE 6~IE 8）中，仅能通过window.event才能获取事件对象。
事件对象常用的属性和方法
<button>事件对象</button>
<script>
var btn = document.querySelector('button')
btn.onclick = function(e){
console.log(e.target)// 事件的触发对象
console.log(e.type)// 事件的类型
console.log(this)// 事件绑定的对象
}
</script>
事件阻止
事件阻止 可以通过事件对象的preventDefault()方法和returnValue属性进行事件阻止
注意： 只有当cancelable为true才可以调用preventDefault()方法
阻止超链接跳转
<body>
<a href="http://www.baidu.com">百度</a>
<script>
// 获取超链接
var a = document.querySelector('a');
// 注册click事件 阻止a标签的默认事件 标准浏览器的写法
a.addEventListener('click',function(e){// e在这里代表鼠标mouseEvent 谁click e就是谁
e.preventDefault();
})
// 早期浏览器的写法 推荐
a.onclick = function(e){
e.preventDefault();
e.returnValue;
}
</script>
</body>
事件委托
事件委托：将事件统一绑定给共同的祖先元素，这样当后代元素上的事件触发时，会一直触发到祖先元素从而通过祖先元素的响应函数来处理事件。
优点： 只操作一次DOM，可以提高程序的性能。
事件委托主要原理是事件冒泡
利用事件委托增删链接
<button id="btn">添加链接</button>
<button id="btn2">删除链接</button>
<ul id="ul">
<li><a href="javascript:;" class="n">超链接1</a></li>
<li><a href="javascript:;" class="n">超链接2</a></li>
<li><a href="javascript:;" class="n">超链接3</a></li>
</ul>
<script>
window.onload = function () {
var ul = document.querySelector('#ul')
var btn = document.querySelector('#btn')
var btn2 = document.querySelector('#btn2')
btn.onclick = function () {
var li = document.createElement('li')
li.innerhtml = "<a href='javascript:;'>超链接</a>"
ul.appendChild(li)
}
btn2.onclick = function () {
var a = document.querySelectorAll('a')
ul.removeChild(ul.children[0])
ul.onclick = function (e) {
var a = document.querySelectorAll('a')
// 如果触发事件对象是我们期望的元素 则执行否则不执行
// target 表示触发事件的对象 this表示事件绑定对象ul
for (var i = 0; i < a.length; i++) {
if (e.target == a[i]) {
alert('我是ul的单机响应函数')
}
}
}
}
</script>
鼠标事件
鼠标事件对象
鼠标事件对象常用位置属性
clientX:浏览器可视窗口区域的x坐标
clientY:浏览器可视窗口区域的Y坐标
pageX:文档中x坐标
pageY:文档中y坐标
screenX:屏幕中的x坐标
screenY:屏幕中的y坐标
CAD坐标练习
<style>
div{
position: absolute;
background-color: #bfa;
}
</style>
</head>
<body>
<div></div>
<script>
var sp = document.querySelector('div')
document.addEventListener('mousemove',function(e){
var x = e.pageX
var y = e.pageY
sp.style.left = x+'px'
sp.style.top = y+'px'
sp.innerHTML = '(x:'+x+',y:'+y+')'
})
</script>
</body>
键盘事件
用户在使用键盘时触发的事件
键盘事件对象（KeyBoardEvent ）其属性keyCode返回的是按键的ASCII码值，通过ASCII码值可以判断出用户按了哪个键
输出用户键盘按下的键
<body>
搜索：<input type="text">
<script>
var search = document.querySelector('input')
document.addEventListener('keyup',function(e){
alert('你按了'+String.fromCharCode(e.keyCode))
})
</script>
</body>
以上是关于JavaScript DOM事件进阶及相关练习的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 函数进阶函数（匿名回调递归函数）及相关练习
web前端练习28----Dom4,事件(事件对象，事件冒泡，事件委派，事件传播，事件绑定，事件移除及案例练习)