通用事件绑定

 
function bindEvent(elem,type,fn) {
  elem.addEventListener(type,fn);
}
let a =document.getElementById('a');
bindEvent(a,'click',function(e){
  e.preventDefault() //阻止浏览器默认行为,防止调转
  alert(‘clicked’);
}) 

事件冒泡

<body>
<div>
<p id ="p1">激活</p>
<p id ="p2">取消</p>
<p id ="p3">取消</p>
</div>
<div>
<p id ="p4">取消</p>
<p id ="p5">取消</p>
</div>
</body>
let body =document.body
let p1 =document.getElementById('p1');
bindEvent(p1,'click',function(e){
e.stopPropagation(); //阻止事件冒泡
alert('激活')
})
bindEvent(body,'click',function(e){
alert('取消')
})

事件代理

<body>
<div id="div1">
<p id ="p1">激活</p>
<p id ="p2">取消</p>
<p id ="p3">确认</p>
</div>
</body>
let body =document.body
let div1 =document.getElementById('div1');
bindEvent(div1,'click',function(e){
const target =e.target;
if(target.nodeName === 'A') { //判断是否是a标签
alert('target.innerHTML')
}
}) 

事件绑定函数(完善)

function bindEvent(elem,type,selector,fn) {
if(fn == null){
fn = selector;
selector = null;
}
elem.addEventListener(type,function(e){
if(selector){
const target= e.target
if(target.matches(seletor)){
fn.call(target, e)
}
}else {
fn(e);
}
});
}

JS基础——事件操作总结的更多相关文章

  1. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  2. JS基础——事件绑定

    上一篇博客JS事件对象中,老师问JS事件处理和VB中的事件处理有什么联系?先来解决一下这个问题.举个VB.net中事件处理的样例(JS敲久了,VB习惯的都不熟悉了,看来得常常回想了): 1.事件处理V ...

  3. js基础——属性操作

    html属性:属性名——属性值 操作:读 . 写 读操作:用来获取.找到属性名对应的属性值,方法:元素.属性名 例如:var oBtn = document.getElementById('btn1' ...

  4. 2-4 js基础-事件对象小结

    var e=ev||event; e.cancelBubble=true; document.documentElement   html document.body                  ...

  5. js基础——事件绑定(事件监听)

    JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 <div id="box" onClick="alert('HELLO W ...

  6. JS基础-事件循环机制

    从一道题浅说 JavaScript 的事件循环 原文链接: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 ...

  7. JS基础-事件

    事件机制 事件触发三阶段 事件触发有三个阶段: window 往事件触发处传播,遇到注册的捕获事件会触发 传播到事件触发处时触发注册的事件 从事件触发处往 window 传播,遇到注册的冒泡事件会触发 ...

  8. JS 基础事件的用法

    // 1.9以上用on // 案例一 // $('#btn').on('click', function(){ // //console.log(1); // alert('测试...'); // } ...

  9. js基础---元素操作时字符串拼接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Install dotNet Core on Mac

    1. 按照官方页面进行安装 https://www.microsoft.com/net/core#macos 2. 在运行"brew link --force openssl" 时 ...

  2. mongodb shell警告

    # mongoMongoDB shell version: 3.0.2connecting to: testServer has startup warnings: 2015-05-09T12:34: ...

  3. PHP后台处理jQuery Ajax跨域请求问题 — xx was not called解决办法

    // 前台代码 $.ajax({ url: 'http://www.ushark.net/home/save_trial_apply', dataType: 'jsonp', processData: ...

  4. js:自动亮起100盏灯

    1)    使用js在页面上显示100盏灯,并标记从1到100的编号2)    页面加载后3秒,从编号是1的灯依次自动亮起.3)    每过0.5秒亮下一盏灯(10分)4)    所有灯亮起后,弹出确 ...

  5. Redis(一):centos下安装。

    yum install gcc-cc++ wget http://download.redis.io/releases/redis-4.0.2.tar.gz .tar.gz /usr/local cd ...

  6. Docker解决没有vi、vim等命令

    1.apt update 同步 /etc/apt/sources.list 和 /etc/apt/sources.list.d 中列出的源的索引,获取到最新的软件包. 2.apt install vi ...

  7. Mvnw 简介

    Mvnw 简介  8月 17, 2016 |  Nix.Huang 背景 maven是一款非常流行的java项目构建软件,它集项目的依赖管理.测试用例运行.打包.构件管理于一身,是我们工作的好帮手,m ...

  8. HTML学习---HTML状态码

    301 Moved Permanently 永久移动.请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI.今后任何新的请求都应使用新的URI代替302 Found ...

  9. 深入浅出SharePoint——Caml快速开发

    适用于Visual Studio 2010的Caml智能感知工具 http://visualstudiogallery.msdn.microsoft.com/15055544-fda0-42db-a6 ...

  10. Java 集合框架(常用数据结构)

    早在Java 2中之前,Java就提供了特设类.比如:向量(Vector).栈(Stack).字典(Dictionary).哈希表(Hashtable)这些类(数据结构)用来存储和操作对象组.虽然这些 ...