【JavaScript】DOM之事件
DOM
事件
1.事件是什么
让JS知道程序用户行为，比如用户点击HTML页面中的某个按钮和用户输入用户名与密码等操作
<script>
var button = document.getElementById('btn');
// 获取按钮元素
button.onclick = function () {
// 事件绑定
console.log('你已点了我');
}
</script>2.注册事件
JS函数与指定事件相关联，被绑定函数成为事件的句柄
事件被激发时，会绑定函数会被调用
HTML元素的事件属性
表示实注册事件功能
该方式并没有与HTML结构与行为有效的分离
<body>
<button onclick="mylove()" id="btn">按钮</button>
<script>
function mylove() {
console.log('你已点了我');
}
</script>
</body>DOM对象的事件属性
将Document对象定位在THML页面元素
并返回DOM对象体属性，通过它实现各种注册事件功能
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.onclick = mylove;
function mylove() {
console.log('你已点了我');
}
</script>
</body>事件监听器
以addEvantLisener()方法，调用该方法表示元素增加事件监听器
body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById('btn');
btn.attachEvent('onclick',function () {
console.log('XXX');
})
function bind(element,eventName, functionName) {
if (element.addEventListener) {
element.addEventListener()
}
}
</script>
</body>事件监听器中的this
使用addEventListener()方法为页面注册事件时候，this是指注册事件元素
使用attachEent()方法为页面注册事件时候，this是指Window对象，，不是注册事件
<script>
var qyc =document.getElementById('qyc');
/*qyc.addEventListener('click',function () {
console.log(this);//this指当前绑定事件的元素
});*/
/*qyc.attachEvent('onclick',function () {
console.log(this);//this指当前环境的全局对象（Window对象）
});*/
bind(qyc,'click',function () {
console.log(this);//在不同的浏览器中，this会有不同的表示
});
function bind(element, eventName, functionName) {
if (element.addEventListener) {
} else {
element.attachEvent('on' + eventName, function () {
functionName.call(element)
});
}
}//此为IE8之前的版本兼容的解决方案
</script>
</body>3.移除注册事件
removeEventListener()方法，调用此方法表示元素移除事件听器
<body>
<button id="qyc">按钮</button>
<script>
var qyc = document.getElementById('qyc');
function mylove() {
console.log('XXX');
}
qyc.addEventListener('click',mylove);
qyc.addEventListener('click',function () {
console.log('YYY');
});
qyc.removeEventListener('click',mylove);
function unbind(element,eventName,functionName) {
if (element.removeEventListener) {
element.removeEventListener(eventName, functionName);
}else {
element.detachEvent('on' + eventName, functionName);
}
}
</script>
</body>4.Event事件对象
表示移除注册事件在IE8之前版本的
浏览器不支持removeEventListener()方法
<body>
<button id="qyc" onclick="mylove(event)">按钮</button>
<script>
var qyc = document.getElementById('qyc');
qyc.addEventListener('click',function (event) {
console.log(event);
});
qyc.attachEvent('onclick',function () {
console.log(window.event);
});
function bind(element,eventName, functipnName) {
if (element.addEventListener){
element.addEventListener(eventName,functipnName)
} else {
element.attachEvent('on' + eventName, function(){
functipnName.call(element);
});
}
}
</script>5.获取目标
Event事件对象提供target属性，获取触发当前事件的HTML元素
Event事件对象提供currentTarget属性，获取注册当前事件的HTML元素
<style>
ul {
background-color: red;
}
#wl {
background-color: blue;
}
a {
background-color: yellow;
}
</style>
</head>
<body>
<ul id="yx">
<li>单机游戏</li>
<li id="wl"><a href="#">网络游戏</a></li>
<li>手机游戏</li>
</ul>
<script>
var yx = document.getElementById('yx');
yx.addEventListener('click',function (event) {
console.log(event.target);
// target属性-获取绑定当前事件目标元素
console.log(event.currentTarget);
// currentTarget属性-获取绑定当前事件目标元素
console.log(this);
});
yx.attachEvent('onclick',function (event) {
// IE8以下浏览器提供srcElement属性为target目标元素
var e = event || window.event;
console.log(e.srcElement);
});
</script>
</body>6.阻止默认行为
不使用默认，而是
<body>
<a href="#">链接</a>
<script>
var aElement = document.getElementsByName('a');
/*aElement.addEventListener('click',function(event){
event.preventDefault();// 阻止默认行为
});*/
aElement.onclick = function (event) {
event.preventDefault();
return false;
}
aElement.attachEvent('onclick',function (event) {
var e = event || window.event;
e.returnValue = false;
})
</script>
</body>7.获取鼠标
pageX和pageY表示相对于页面中
clientX和clientY表示可视区域
screenX和screenY表示在当前屏幕的
<body>
<script>
var html = document.documentElement;
html.addEventListener('click',function(event){
console.log(event.pageX, event.pageY);
// 鼠标坐标值相对于当前HTML页面
console.log(event.clientX, event.clientY);
// 鼠标坐标值相对于当前可视区域
console.log(event.screenX, event.screenY);
// 鼠标坐标值相对于当前屏幕的
// 鼠标坐标值只能获取，不能设置
});
</script>
</body>8.事件流
<style>
#q1 {
width: 200px;
height: 200px;
background-color: red;
padding: 50px;
}
#q2 {
width: 100px;
height: 100px;
background-color: yellow;
padding: 50px;
}
#q3 {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="q1">
<div id="q2">
<div id="q3"></div>
</div>
</div>
<script>
var q1 = document.getElementById('q1');
q1.addEventListener('click',function(){
console.log('这是d1... ...');
}, false);
var q2 = document.getElementById('q2');
q2.addEventListener('click',function(){
console.log('这是d2... ...');
}, false);
var q3 = document.getElementById('q3');
q3.addEventListener('click',function(event){
console.log('这是q3... ...');
event.stopPropagation();
}, false);
</script>
</body>9.事件委托
大量的HTML元素注册相同事件，并事件句柄逻辑安全相同，会造成页面速度下降，不果事件流允许这些HTML元素同父级元素注册事件
<body>
<div id="qh">
<button id="qyc1">按钮</button>
<button id="qyc2">按钮</button>
<button id="qyc3">按钮</button>
</div>
<script>
var qyc1 = document.getElementById('qyc1');
qyc1.addEventListener('click',function(){
console.log('这是个按钮');
});
var qyc2 = document.getElementById('qyc2');
qyc2.addEventListener('click',function(){
console.log('这是个按钮');
});
var qyc3 = document.getElementById('qyc3');
qyc3.addEventListener('click',function(){
console.log('这是个按钮');
});
var qh = document.getElementById('qh');
// 不把事件绑定给指定元素，绑定给共同父级和祖先元素
qh.addEventListener('click',function (event) {
var target = event.target;//触发事件目标元素
if(targe.nodeName === 'BUTTON') {
console.log('这是个按钮');
}
})
</script>
</body>【JavaScript】DOM之事件的更多相关文章
- JavaScript Dom 绑定事件
JavaScript Dom 绑定事件 // 先获取Dom对象,然后进行绑定 document.getElementById('xx').onclick document.getElementByI ...
- JavaScript DOM 注册事件
一个HTML是一个DOM树,每一个节点都是DOM对象,整个HTML其实也是一个DOM对象,根节点是<html>; 在HTML页面初始化的时候,JavaScript会自动帮DOM对象注册消息 ...
- javascript DOM 操作基础知识小结
经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的. DOM添加元素,使用节点属性 <!DOCTYPE html PUBLIC ...
- JavaScript DOM编程基础精华01（DOM入门，DOM模型和获取页面元素,事件，window对象的方法）
DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...
- javascript系列之DOM(三)---事件
原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
- JavaScript Dom 事件
JavaScript Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...
- 2014年辛星解读Javascript之DOM之事件及其绑定
我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...
- 前端JavaScript(2) --常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍
昨日内容回顾 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 ...
随机推荐
- protel封装总结(新手必看）
零件封装是指实际零件焊接到电路板时所指示的外观和焊点的位置.是纯粹的空间概念.因此不同的元件可共用同一零件封装,同种元件也可有不同的零件封装.像电阻,有传统的针插式,这种元件体积较大,电路板必须钻孔才 ...
- Learn Python the hard way, ex42 物以类聚
依然少打很多剧情,并修改了很多,还好,能运行 #!urs/bin/python #coding:utf-8 from sys import exit from random import randin ...
- linux下升级php5.4到php5.6
进入终端后查看php版本 php -v 输出可能如下: PHP 5.4.35 (cli) (built: Nov 14 2014 07:04:10) Copyright (c) 1997-2014 T ...
- Bootstrap selectpicker 强制向下
selectpicker的方向是自适应的,但是有些界面,我们需要强制向下,可以使用属性data-dropup-auto data-dropup-auto="false" 官网上的o ...
- 牛客练习赛51 C 勾股定理https://ac.nowcoder.com/acm/contest/1083/C
题目描述 给出直角三角形其中一条边的长度n,你的任务是构造剩下的两条边,使这三条边能构成一个直角三角形. 输入描述: 一个整数n. 输出描述: 另外两条边b,c.答案不唯一,只要输出任意一组即为合理, ...
- CSRF verification failed. Request aborted.错误解决办法
在Django项目的页面,提交form表单POST请求时,会出现报错:CSRF verification failed. Request aborted. 需要在form表单中加:{% csrf_to ...
- css中的居中的方法
一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...
- HDU-1394 Minimum Inversion Number (逆序数，线段树或树状数组)
The inversion number of a given number sequence a1, a2, ..., an is the number of pairs (ai, aj) that ...
- .NET基础篇——利用泛型与反射更新实体（ADO.NET Entity Framework）（转）
自从ADO.NET Entity Framework面世以来,受到大家的热捧,它封装了大量代码生成的工具,用户只需要建立好实体之间的关系,系统就是会为用户自动成功了Add.Delete.CreateO ...
- 初入vue.js（1）
本文章属于个人在学习vue的随笔,留作与大家分享,技术交流之用,如果有错误,请大家多多指正.谢谢 首先说一下vue的使用方式: vue的使用方式一共有两种,第一种是直接在官网上下载vue.js的文件, ...