1. 事件默认行为及阻止方式

   1.1 浏览器的默认行为      

JavaScript事件本身所具有的属性,例如a标签的跳转,Submit按钮的提交,右键菜单,文本框的输入等。

   1.2 阻止默认行为的方式

event.preventDefault();  event.returnValue = false;  return false;

//IE低版本和其他版本都支持return false,而其他两种IE低版本不支持。

<a href="">click here.</a>
<script type="text/javascript">
var aLink = document.getElementsByTagName("a")[0];
aLink.onclick = function(e){
var evt = e || event; console.log("aaa");
//return false; //1
//evt.preventDefault(); //2
evt.returnValue = false; //3
}
</script>

自定义右键菜单 oncontextmenu

ul{                        /*菜单的css样式*/
display: none;
position: absolute;
top: 0;
left: 0;
}
var oUl = document.getElementsByTagName("ul")[0];
document.oncontextmenu = function(e){ //右键点哪里,在哪里出现菜单
var evt = e || event;
oUl.style.display = "block";
oUl.style.left = evt.clientX + "px";
oUl.style.top = evt.clientY + "px";
}

小例子来练手:

//			文本框只能输入数字
var aInput = document.getElementsByTagName("input")[0];
aInput.onkeydown = function(e){
var evt = e || event;
//console.log(evt.keyCode);//48-57
if(evt.keyCode < 48 || evt.keyCode > 57){
return false;
}
}

2. DOM2级事件处理程序

DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序:addEventListener()和removeEventListener()。

添加事件监听器:addEventListener(事件名,处理函数,布尔值)

移除事件监听器:removeEventListener(事件名,处理函数,布尔值)

注意:事件名不带on,处理函数为函数指针,布尔值代表冒泡或捕获。现在的版本可以省略第三个参数,默认值为false

这个布尔值为true,在捕获阶段处理事件,为false,在冒泡阶段处理事件,默认为false。

var outer = document.getElementById("outer");

	outer.addEventListener("click",foo,true);            //添加事件监听器
outer.removeEventListener("click",foo,true); //移除
function foo(){
console.log("aaa");
}
//通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除;移除时传入的参数与添加处理程序时使用的参数相同。这也意味着通过addEventListener()添加的匿名函数无法移除,需另外定义一个函数

*普通时间不存在兼容问题,而DOM2级事件存在兼容性问题,IE低版本对象不支持“addEventListener”属性或方法,

IE下的事件监听器:attachEvent(事件名,处理函数),detachEvent(事件名,处理函数) 注意:事件名带on。

道高一尺,魔高一丈,我们可以自己封装一个函数解决兼容问题。

function foo(){
console.log("aaa");
}
function addEvent(obj){
if(obj.addEventListener){
return obj.addEventListener("click",foo);
}else{
return obj.attachEvent("onclick",foo);
}
}
addEvent(outer);

3. 事件委托机制

利用事件冒泡的原理,把本应添加给某元素上的事件委托给他的父级(外层)。

实现拖拽效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: aquamarine;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var oDiv = document.getElementsByTagName("div")[0];
oDiv.onmousedown = function(e){
var evt = e || event;
_left = evt.offsetX;
_top = evt.offsetY;
document.onmousemove = function(e){
var evt = e || event;
x = evt.clientX - _left;
y = evt.clientY - _top;
if(x<=0){x=0;}
if(x >= document.documentElement.clientWidth - oDiv.offsetWidth){
x = document.documentElement.clientWidth - oDiv.offsetWidth;
}
if(y >= document.documentElement.clientHeight - oDiv.offsetHeight){
y = document.documentElement.clientHeight - oDiv.offsetHeight;
}
if(y<=0){y=0;}
oDiv.style.left = x + "px";
oDiv.style.top = y + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</body>
</html>

JavaScript 之默认行为 DOM2级,事件委托机制的更多相关文章

  1. JS事件委托(事件代理,dom2级事件)

    一.前言 说实话,真问我什么是事件委托,我肯定gg,还好查了一下,原来就是我之前练习过的DOM2级事件的应用. 二.什么是事件委托? 事件委托就是当事件触发时,把要做的事委托给父元素(或父元素的父元素 ...

  2. 2015-03-12——简析DOM2级事件

    DOM2级事件 事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件. 对象事件:window对象,也是javascript对象.load  适用于windo ...

  3. DOM0、DOM2级事件

    JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1' ...

  4. 关于DOM事件流、DOM0级事件与DOM2级事件

    一.DOM 事件模型 DOM 事件模型包括捕获和冒泡,捕获是从上往下到达目标元素,冒泡是从当前元素,也就是目标元素往上到 window 二.流 流的概念,在现今的 JavaScript 中随处可见.比 ...

  5. Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制

    一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...

  6. dom0级事件和dom2级事件

    dom0级事件 <a href="#" id="hash" onclick="fn();fn1();"> <button ...

  7. 测试DOM0级事件和DOM2级事件的堆叠

    1. 问题 如果大家看过北风网CJ讲师的Javascript视频教程,就可以看到其封装了一个很强的事件添加和删除函数,如下所示 function addEvent(obj, evtype, fn) { ...

  8. DOM1级问题与DOM2级事件

    前几天有小伙伴问过我一个问题,为什么有DOM 0级事件以及DOM2级事件,但是却没有DOM1级事件呢?那我们今天就来说一说DOM的级别问题. 同时推荐伙伴们可以看看尚学堂有关JavaScript BO ...

  9. 关于DOM2级事件的事件捕获和事件冒泡

    DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是 ...

随机推荐

  1. VGG

    2019-04-08 13:30:58 VGG模型是2014年ILSVRC竞赛的第二名,第一名是GoogLeNet.但是VGG模型在多个迁移学习任务中的表现要优于googLeNet.而且,从图像中提取 ...

  2. [ Servlet / JSP ] J2EE Web Application 中的 JSESSIONID 是什么?

    JSESSIONID is a cookie in J2EE web application which is used in session tracking. Since HTTP is a st ...

  3. requests库爬取猫眼电影“最受期待榜”榜单 --网络爬虫

    目标站点:https://maoyan.com/board/6 # coding:utf8 import requests, re, json from requests.exceptions imp ...

  4. Confluence 6 超过当前许可证期限进行升级

    这个页面将会对你在进行 Confluence 升级的时候超过了当前许可证的期限进行升级的情况. 许可证警告 在升级的过程中,你将会在 Confluence 的应用程序日志(log file)中看到类似 ...

  5. php(三)使用thinkphp操作数据库

    1.数据库设置 在项目D:\workspaces\phpDemo01\helloworldProject\Common\Conf\config.php配置: <?php return array ...

  6. Docker和jenkins实现springboot自动部署

    准备: 一个springboot项目.一台虚拟机(centos 7). 安装: linux安装docker 更新yum:yum update 下载docker: yum –y install dock ...

  7. swarm 使用整理

    swarm 是 docker 公司弄的 docker 集群管理工具.  整理使用实践如下. 1. 准备 3 台实例机   ip 地址分别是 192.168.0.131    ~   1332. 在三台 ...

  8. Oracle单机Rman笔记[2]---RMAN基础介绍

    A.DBA对于备份恢复的问题: 1.在数据库发生故障时,丢失多少数据是可承受的? 2.恢复数据库时,能够忍受的最长时间多少? 3.为了确保您的数据能够被恢复,愿意投入多少成本? 4.备份期间可以关闭系 ...

  9. sftp无法连接问题

    sftp连接linux 出现错误,就是服务器没有开sftp服务 解决:在linux服务器上,确保sftp定义在sshd的配置文件(一般为/etc/ssh/sshd_config)中:Subsystem ...

  10. MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.7 Adding a wms layer

    MapServer Tutorial——MapServer7.2.1教程学习——第一节用例实践:Example1.7 Adding a wms layer 前言 Add OGC WMS Layers( ...