700字范文 > JavaScript DOM事件(笔记)【javascript】

JavaScript DOM事件(笔记)【javascript】

时间：2019-07-30 04:58:04

web前端|js教程

JavaScript,DOM

web前端-js教程

第1章事件流

oa办公系统源码下载,实验楼ubuntu,APP能连接TOMcat吗,网络用语爬虫,php网络视频教程,太和seolzw

1-1.事件冒泡:事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收;

然后逐级向上传播至最不具体的那个节点(文档);

1-2.事件捕获:不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件;

微信转发红包源码,ubuntu 依赖包下载,tomcat没安装包,博客爬虫功效,php控制木马,行唐一站式seo服务成本lzw

第2章事件处理程序

爱发php企业发卡网源码,用vscode写圆周,ubuntu 番茄钟,tomcat启动访问地址,爬虫 before,php 不等于0,seo优化官网广告,手机商城手机网站模板,网站考试登陆模板下载地址lzw

2-1 HTML事件处理程序

//缺点:HTML和JS代码紧密的耦合在一起;

2-2 DOM0级事件处理程序

//较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多;

//优点:简单/跨浏览器;

var btn2 = document.getElementById(tn2); //取得btn2按钮对象; btn2.onclick = function () { //给btn2添加onclick属性; alert(这是通过DOM0级添加的事件!); } btn2.onclick=null; //删除onclick属性;

2-3 DOM2级事件处理程序

//DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作;

//addEventListener()和removeEventListner();

//接收三个参数:要处理的事件名/事件处理函数和布尔值;

//在IE8一下,不起作用;

var btn3 = document.getElementById(tn3); btn3.addEventListener(click,showMessage,false); //添加事件程序; btn3.addEventListener(click,function(){ //添加多个事件程序; alert(this.value); },false); btn3.removeEventListener(click,showMessage,false); //删除事件程序;

2-4 IE事件处理程序及跨浏览器

//接收两个参数:事件处理函数名称和事件处理函数

var btn3 = document.getElementById(tn3); btn3.attachEvent(onclick,showMessage);//添加事件; btn3.detachEvent(onclick,showMessage);//删除事件;

>2.浏览器兼容

//将添加和删除事件处理程序封装到对象中并赋值给变量eventUtil;var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ //判断DOM2级事件处理程序; if(element.addEventListener){ element.addEventListener(type,handler,false); //判断IE浏览器; }else if(element.attachEvent){element.attachEvent("on"+type,handler); //使用DOM0级事件处理程序; }else{element[on+type] = handler; } }; //删除句柄 removeHandler:function(element,type,handler){ //判断DOM2级事件处理程序; if(element.removeEventListener){ element.removeEventListener(type,handler,false); //判断IE浏览器; }else if(element.detachEvent){element.detachEvent("on"+type,handler); //使用DOM0级事件处理程序; }else{element[on+type] = null; }; };};//跨浏览器添加事件处理程序;eventUtil.addHandler(btn3,click,showMessage);

第3章事件对象

3-1 DOM中的事件对象

//在触发DOM上的事件时都会产生一个对象==event;

>1.type == 获取事件类型;

>2.target == 获取事件目标;

>3.stopPropagation() == 停止事件冒泡;

>4.preventDefault() == 阻止事件的默认行为;

function showMes(event){ alert(event.type);//onclick;点击事件; alert(event.target.nodeName); //INPUT;input按钮被触发; event.stopPropagation();//停止事件冒泡;}跳转function stopGoto(event){ event.preventDefault();//阻止默认行为;}

3-2 IE中的事件对象

>1.type == 同上;

>2.srcElement属性 == 获取事件目标;

>3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡;

>4.returnValue属性 == 用于阻止事件的默认行为;

第4章 QQ面板拖拽效果

>1.封装获取Class方法

>2.封装拖拽函数

第4章抽奖系统

>1.键盘事件

>>1.keyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件;

>>2.keyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件;