day51—JavaScript绑定事件
转换学开发,代码100天——2018-05-06
今天学习JavaScript的绑定事件。因为浏览器的原因绑定事件需要考虑兼容性问题。
attachEvent | IE浏览器 ,ie9以上事件执行顺序与绑定顺序相同;ie9以下事件执行顺序与绑定顺序相反 |
btn.attachEvent("onclick",function(){ |
detachEvent |
btn.detachEvernt("onclick",function(){ |
|
addEventListener | FF及chrome浏览器 |
btn.addEventListener("click",function(){ |
removeEventListener |
btn.renoveEventListener("onclick",function(){ |
如对一个按钮添加多个事件:
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById("btn");
addMyEvent(btn,"click",function()
{
alert("a");
});
addMyEvent(btn,"click",function()
{
alert("b");
});
} function addMyEvent(obj,ev,fn){
if (obj.attachEvent) {
obj.attachEvent("on"+ev,fn);
}
else{
obj.addEventListener(ev,fn);
}
}
</script>
补充:将上一篇文章中的拖拽事件改成线框拖拽效果
按下鼠标,拖动物体时:
松开鼠标后:
<!DOCTYPE html>
<html>
<head>
<title>javascript 拖拽</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
.Box{
border: 1px dashed black;
position: absolute;
}
</style> <script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var disX =0;
var disY =0;
oDiv.onmousedown = function(ev){
//创建虚线框
var oBox = document.createElement("div");
oBox.className = "Box";
oBox.style.width = oDiv.offsetWidth+"px";
oBox.style.height = oDiv.offsetHeight+"px";
oBox.style.left = oDiv.offsetLeft+"px";
oBox.style.top = oDiv.offsetTop+"px";
document.body.appendChild(oBox); var oEvent = ev||event;
disX = oEvent.clientX-oDiv.offsetLeft;
disY = oEvent.clientY-oDiv.offsetTop;
if (oDiv.setCapture) {
//鼠标移动事件
oDiv.onmousemove = mouseMove;
oDiv.onmouseup = mouseUp;
oDiv.setCapture();//ie专用
return false;
}else{
//鼠标移动
document.onmousemove =mouseMove;
document.onmouseup = mouseUp;
return false;
}
//鼠标按下事件
function mouseMove(ev){
var oEvent = ev||event;
var l = oEvent.clientX-disX;
var t = oEvent.clientY-disY;
oBox.style.left = l+"px";
oBox.style.top = t+"px";
};
//鼠标抬起事件
function mouseUp()
{
this.onmousemove = null;
this.onmouseup = null;
if (this.setCapture)
{
this.releaseCapture();//ie专用
}
oDiv.style.left = oBox.offsetLeft+"px";
oDiv.style.top = oBox.offsetTop+"px";
document.body.removeChild(oBox);
};
};
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
day51—JavaScript绑定事件的更多相关文章
- JavaScript绑定事件的方法[3种]
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HT ...
- Javascript绑定事件的两种方式的区别
命名函数 <input type="button" onclick="check()" id="btn"/> <scrip ...
- javascript绑定事件
本质:不同的库或者工具中总是封装了不同的事件绑定形式,但是究其根源,还是IE事件模型和W3C事件模型不同的处理方式 1)W3C事件模型:支持事件捕捉和冒泡 addEventListener('type ...
- javascript绑定事件addEventListener与attachEvent
1.eleObj.addEventListener(eventName,handle,useCapture); eleObj:DOM元素: eventName:事件名称.注意,这里的事件名称没有“ o ...
- JavaScript 绑定事件时传递数据
var data = { name: 'Ruchee', email: 'my@ruchee.com' }; data.handleEvent = function (e) { console.log ...
- javaScript绑定事件委托 demo
事件绑定通常发生在 onload 或 DOMContentReady , 事件绑定占用 处理时间 占用内存, 而且不是每个事件都会被 点击执行. 由此 事件委托 可以优化事件绑定行为.. 事件逐层冒泡 ...
- JavaScript中事件绑定的方法总结
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScr ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
- javascript对象事件绑定方法
javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...
随机推荐
- Python中函数传递参数有四种形式
Python中函数传递参数有四种形式 fun1(a,b,c) fun2(a=1,b=2,c=3) fun3(*args) fun4(**kargs) 四种中最常见是前两种,基本上一般点的教程都会涉及, ...
- Hangfire
参考 开源分布式Job系统,调度与业务分离-如何创建一个计划HttpJob任务
- 【源码解读】cycleGAN(三):数据读取
源码地址:https://github.com/aitorzip/PyTorch-CycleGAN 数据的读取是比较简单的,cycleGAN对数据没有pair的需求,不同域的两个数据集分别存放于A,B ...
- Django signal 信号量
参考博客:方法发及使用场景:https://my.oschina.net/linktime/blog/151871 部分源码解析:https://www.cnblogs.com/shizhengwen ...
- pL/Sql插入语句时报错,对表空间没有权限 对表空间 'USERS' 无权限
进入dba为其授予权限:sqlplus sys/admin as sysdba; 为用户授予权限即可 grant unlimited tablespace to username;
- 事件流程以及dom2级事件绑定
事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直 ...
- django基础篇05-Form验证组件
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 基本简单的操作: from django im ...
- vb中的资源文件
--- 一.VB中资源文件的分类 ---- 通常将资源分为两类:1.字符串资源,包括菜单和文本中使用的字符串,如"Hello World"等:2.二进制资源,如位图(.BMP),图 ...
- Python---进阶---logging---logger
一.####用logging的四大组件来实现日志的功能 - 打印出函数执行的时间,日志的等级,日志的消息 - 用装饰器 - 不同的日志,要记录不同等级的日志消息 ------------------- ...
- 【GDOI2016模拟3.10】习用之语
前言 这道题看上去很水,结果我在比赛上浪费了N多时间在上面,但还是没AC.比赛结束后发现:实际上这道题还是是大水. 题目 分析 设字符串c1c2c3c4,其中c1.c2.c3.c4={'0'~'9', ...