JS事件对象与事件委托

时间:2022-12-12 07:58:32

事件对象

包含事件相关的信息,如鼠标、时间、触发的DOM对象等

js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下:

document.getElementsByTagName("div")[0].onclick = function(e){
  e = window.event || e; //兼容IE低版本(事件对象绑定在window的event上)
  console.log(e);//这里e就是事件对象
}

事件的属性和方法

type:获取事件类型(click、mouseover等等)

target:获取发生的所在元素(在低版本IE下用srcElement属性)

stopPropagation() 阻止事件冒泡(IE用cancelBubble属性为false阻止冒泡)

preventDefault() 阻止事件默认行为(IE用returnValue属性为false阻止默认行为)

事件委托

利用target属性,获取时间发生的所在对象,避免全体子元素加事件,对比如下:

var tbs=document.getElementsByTagName("td");
for(var i=0;i<tbs.length;i++){//循环给每个子元素添加事件
tbs[i].onclick=function(){
this.style.background="red";
}
}
document.getElementsByTagName("table")[0].onclick=function(e){
e.target.style.background="red";//只绑定父元素事件,用target获取子元素
}

JS事件对象与事件委托的更多相关文章

  1. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  2. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  3. JavaScript事件对象与事件的委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  4. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  5. js:事件(注册、解绑、DOM事件流、事件对象、事件委托)

    1.注册事件 (1)传统方式注册事件 <body> <button id="b1">请点击</button> <script> va ...

  6. python全栈开发day49-jquery的位置信息、事件流、事件对象,事件委托,事件绑定和解绑

    一.昨日内容回顾    1. jQuery的属性操作 1) html属性操作:attr 2) DOM属性操作:prop 3) 类样式操作:addClass.removeClass.toggleClas ...

  7. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

  8. JS事件-对象监视事件,事件触发函数

    写在前面: 一句话作为本文的核心思想:对象监视事件,事件触发函数: (一)事件 1.事件分类 (1)鼠标事件 click()                      鼠标单击 dblclick()  ...

  9. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

随机推荐

  1. Quartz2D 编程指南(二)变换、图案、阴影

    概览 图形上下文 路径 颜色与颜色空间 变换 图案 阴影 渐变 透明层 Quartz 2D 中的数据管理 位图与图像遮罩 CoreGraphics 绘制 Layer 5.变换 简介 Quartz 2D ...

  2. C语言回顾-内存管理和指针函数

    1.fgets()函数 该函数是一个文件操作相关的函数 暂时使用这个函数可以从键盘上接收一个字符串,保存到数组中 char str[50]; 1)scanf("%s",str);/ ...

  3. C&num;总结1

    C#摘要 第一章: 数据类型: 在定义变量的时候,记下规则,开头不能是数字,变量名只能包括 字母 “_” 数字 整型类型 名称 CTS类型 说明 范围 sbyte System.SByte 8位有符号 ...

  4. Can&&num;39&semi;t connect to local MySQL server through socket &&num;39&semi;&sol;tmp&sol;mysql&period;sock&&num;39&semi; &lpar;2&rpar;

    在mac上面安装mysql之后,输入mysql一直报错,可以通过下面的方法解决. mysqld stop mysql.server start   http://*.com/q ...

  5. Linux Select之坑

    最近在写一个demo程序,调用select()来监听socket状态,流程如下: r_set 初始化 timeout 初始化3秒超时 loop{ select(ntfs, &r_set, nu ...

  6. HTTP请求分析工具Fiddler

    主要用于分析http头信息和响应头信息,以及具体的post数据和响应数据,可以监测电脑上http请求.

  7. git 上传本地项目

    一.下载和安装git 官网下载,默认一直点下一步安装. https://git-scm.com/ 二.在www.gitee.com 注册一个账号 1.点击加号“+”在gitee中新建一个项目 2.下面 ...

  8. 【XSY2534】【CF835D】Palindromic characteristics 回文自动机

    题目大意 ​ 一个字符串\(s\)是\(1\)−回文串当且仅当这个串是回文串. ​ 一个串\(s\)是\(k\)−回文串\((k>1)\)当且仅当\(s\)的前一半与后一半相同且\(s\)的前一 ...

  9. 在window 2008r2开发服务器上安装MSMQ消息队列

    1.打开”服务器管理器“------”功能“-------”添加功能“,勾选”消息队列“,如下图: 如果之前已经勾选,则忽略此步. 2.”功能“------”消息队列“------”专有对列“---- ...

  10. MVC扩展之HtmlHelper辅助方法

    1.什么是HtmlHelper辅助方法?其实就是HtmlHelper类的扩展方法,如下所示: namespace System.Web.Mvc.Html { public static class F ...