一、js事件绑定在对象上的三种方法

a:将事件绑定在元素标签的属性上

<h3 onclick="console.log('奥特曼打怪兽')">海绵宝宝历险记</h3>

b:将事件作为属性添加到对象上

<h4>海绵宝宝历险记2</h4>

window.onload = function(){

    var h4 = document.getElementsByTagName('h4')[0];

    h4.onclick = function(){

    console.log('奥特曼第二次打怪兽');

        }

}

c:将事件作为方法添加到对象上。       方法名称：addElementListener（）→ 向指定元素添加事件

<h4>海绵宝宝历险记3</h4>

window.onload = function(){

    var h4 = document.getElementsByTagName('h4')[0];

    var fyh=function(){

        console.log('奥特曼第三次打怪兽');

    }

h4.addEventListener('click',fyh,false);

  //事件名称、处理程序（回调方法）、false以冒泡方式处理

h4.removeEventListener('click',fyh,false);

  //将次方法移除；方法名称：removeEventListener

}

事件监听→ 事件监听移除   
true 的触发顺序总是在 false 之前；
如果多个均为 true，则外层的触发先于内层；
如果多个均为 false，则内层的触发先于外层。

二、冒泡事件和捕获事件

　　//捕获事件发生过程：window-document-body-div-button （从大到小）

　　//冒泡事件发生过程:div-body-document-window　　　　 （从小到大）

a：冒泡事件

<h2>中国</h2>

    <ul>

        <li>1111111111</li>

        <li>2222222222</li>

        <li>3333333333</li>

    </ul>

<script>

window.onload = function(){
var li= document.getElementsByTagName('li');
var ul= document.getElementsByTagName('ul')[0];
document.body.onclick=function(m){
alert('我是body');
}
ul.onclick=function (m){
alert('我是ul');
}
for (var i=0;i<li.length;i++){
li[i].onclick=function (m){
alert('我是li');
//冒泡拦截
m.cancelBubble=true; //拦截冒泡
m.stopPropagation();
}
}
}

</script>

　　注：a：输出结果由内往外弹出我是li/ul/body

　　　　b：cancelBubble=true{true为拦截冒泡，默认值是false}

　　　　　  stopPropagation()

　　　　　　　　俩个同为拦截冒泡的方式，写在一起是为了浏览器兼容使用。

b：捕获事件

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			#div2{width:200px;height:200px;background:#f00;}

		</style>

	</head>

	<body>

		 <div id="div2">

                <div id="div1">点我</div>

        </div>

    <script>

    	//事件的捕获

        var div2=document.getElementById('div2');

        var div1=document.getElementById('div1');

        div2.addEventListener('click', function(event){console.log("A");}, false);

//      div2.addEventListener('click', function(event){console.log("B");});

        div1.addEventListener('click', function(event){console.log("C");}, false);

//      div2.addEventListener('click', function(event){console.log("D");}, true);

    </script>

	</body>

</html>

　　注：返回结果为C、A

三、addEventListener绑定click与直接写onclick的区别

<body>

	<!--addEventListener绑定click与直接写onclick的区别-->

	<ul id="difference">

	    <li id="add_event">11111111</li>

	    <li id="on_click">22222222222</li>

	</ul>

         <script>

		var on_click = document.getElementById('on_click');

		on_click.onclick=function(){

//			alert('click1');

		};

		on_click.onclick=function(){

//			alert('click2');

		};

//onclick绑定了两次，由于click在同一时间只能指向唯一对象，所以当对象绑定了多次，只会出现最后一次绑定。

		var add_event = document.getElementById('add_event');

		add_event.addEventListener('click',function(){

			alert('add_event1');

		},false);

		add_event.addEventListener('click',function(){

			alert('add_event2');

		},false);

	//多次事件绑定的运行时使用

		</script>

	</body>

四、onchange事件（HTML元素被改变）

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

	</head>

	<script>

		function myFunction(){

		var x=document.getElementById("fname");

		     x.value=x.value.toUpperCase();     //获取X内的值，将input框内元素被

 改变。

		}

	</script>

	<body>

	输入你的名字: <input type="text" id="fname" onchange="myFunction()">

		<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

	</body>

</html>　

五、onkeydown（用户按下键盘按键）

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script>

			function myFunction(){

			alert("你在输入栏内按下一个键");

			}

		</script>

	</head>

	<body>

		<p>当你在输入框内按下一个按键是函数被触发</p>

		<input type="text" onkeydown="myFunction()">

	</body>

</html>

六、onmouseover（用户把鼠标移到HTML上）和onmouseout（用户把鼠标移开HTML上）

　　{示例参考w3c}　　

js-07-事件的更多相关文章

  1. 探讨Js的事件的冒泡阶段

    近来看到了一个新的知识点叫Js的事件冒泡,因此决定自己来研究一番. 大家应该都知道,Js中的事件处理分为三个阶段,1:事件的捕获阶段,2:处于目标阶段,3:事件的冒泡阶段.那么什么是事件的捕获和冒泡呢 ...

  2. 浅谈js的事件冒泡机制

    很多人都听说过,js的事件冒泡机制,其实,这个说法还是比较生动形象的,就是一个水泡在水底下,冒泡到水面的过程. 那js的事件冒泡机制呢,就是一个DOM树,一级一级向上冒的过程,最终是到document ...

  3. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  4. Js 冒泡事件阻止

    Js 冒泡事件阻止   1. 事件目标 现在,事件处理程序中的变量event保存着事件对象.而event.target属性保存着发生事件的目标元素.这个属性是DOM API中规定的,但是没有被所有浏览 ...

  5. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  6. JS通用事件监听函数

    JS通用事件监听函数 版本一 //把它全部封装到一个对象中 var obj={ readyEvent:function (fn){ if(fn==null){ fn=document; } var o ...

  7. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  8. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. js 鼠标事件的抓取代码

    js 鼠标事件的抓取代码,分享给大家. 1.通过ele.setCapture();设置鼠标事件的抓取. 2,应用可以通过单.双击文字来获取时间. <html> <head> & ...

  10. js Touch事件（向左滑动，后退）

    js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...

随机推荐

  1. 使用Python编写打字训练小程序

    你眼中的程序猿 别人眼中的程序猿,是什么样子?打字如飞,各种炫酷的页面切换,一个个好似黑客般的网站破解.可现实呢? 二指禅的敲键盘,写一行代码,查半天百度-那么如何能让我们从外表上变得更像一个程序猿呢 ...

  2. spring redis学习笔记

    1.下载: https://github.com/MicrosoftArchive/redis/releases,并解压文件; 2.双击redis-server.exe,运行redis服务器; 3.双 ...

  3. 前后台分离的 NET Core 通用权限管理系统

    前言 从事软件开发这个行业现在已经有十几年了,项目无论大小权限认证.授权模块总是或多或少有功能需求的,这一块费时费力但是又存在于后台,使用最多的可能是运维人员所以处于出力不讨好的尴尬地位,每次有新的项 ...

  4. linux实用小命令--查看文本内容

    一.cat命令 $ cat [参数]filename 这还有一些可以和cat命令一起用的参数,可能对你有所帮助. 1.-n 参数会所有的行加上行号: $ cat -n test1 2.这个功能在检查脚 ...

  5. postman tests常用方法

    postman常用方法集合: 1.设置环境变量 postman.setEnvironmentVariable("key", "value"); pm.envir ...

  6. Preact（React）核心原理详解

    原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...

  7. mac端口占用

    lsof -i tcp:port 可以查看该端口被什么程序占用,并显示PID port 替换成端口号, eg: lsof -i tcp:8081 kill pid 杀死PID

  8. Java修炼——递归算法的俩个实例

    1.是输出指定文件目录下的所以子目录以及文件 2.使用递归算算法:1!+2!+3!+4!+5!+-+n!(计算阶乘累加) package com.bjsxt.recurison; import jav ...

  9. 移动开发在路上-- IOS移动开发系列 网络交互四（1）

    最近一段时间上班忙的没日没夜的,不是披星戴月,就是头天早上出门,第二天早上回家...一直没出处时间来更新博客,码农之苦,说了都是泪,废话不多说,直接本主题,经过之前三篇的讲述,ios开发的东西大家或多 ...

  10. openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...