事件绑定，取消冒泡，拖拽，点击，事件委托习题

事件知识的，冒泡，绑定，委托

<script type="text/javascript">//事件绑定 取消
var div=document.getElementsByTagName('div')[0];
div.addEventListener('click',test,false);
div.removeEventListener('click', test,false);
function test(){console.log('a');
}
//取消冒泡；
document.οnclick=function(){console.log('全局');
}
div.addEventListener("click",function(e){this.style.background='green';//  e.stopPropagation();e.cancelBubble=true;
},false)
//事件委托；利用事件冒泡和事件原对象
var ul=document.getElementsByTagName('ul')[0];
ul.onclick=function(e){var event =e||window.event;var target=event.target||event.srcElement;console.log(target.innerText);}

习题小练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style text="text/css">input{border:1px solid #01f;}div{margin: 100px;}</style>
</head>
<body><input type="text" value="请输入用户名" style="color:#999"onfocus="if(this.value=='请输入用户名'){this.value='';this.style.color='red';}" οnblur="if(this.value==''){this.value='请输入用户名';  this.style.color='#999'                                }">    <div class="box" style="height: 100px;width:100px;background-color:red;position: absolute;left:10px;top: 0;" ></div>
<script type="text/javascript">//拖拽练习var div=document.getElementsByTagName('div')[0];
var disx,disy;
div.onmousedown=function(e){disx=e.pageX-parseInt(div.style.left);disy=e.pageY-parseInt(div.style.top);document.onmousemove=function(e){var event=e||window.event;div.style.left=e.pageX-disx+"px";div.style.top=e.pageY-disy+"px";}document.onmouseup=function(){document.onmousemove=null;}
}
//返回按键字母
document.οnkeypress=function(e){console.log(String.fromCharCode(e.charCode));
}</script></body>
</html>

转载于:https://www.cnblogs.com/zhangjiaqi123/p/10512241.html

事件绑定，取消冒泡，拖拽，点击，事件委托习题相关推荐

echarts 地图去除点击事件_echarts 取消图例上的点击事件和图表上鼠标滑过点击事件...
备注:标黄的代码是起作用的代码,其他的不需要借鉴!!! //取消鼠标滑过的提示框 tooltip : { trigger: 'item', show:false, formatter: " ...
理解事件捕获。在限制范围内拖拽div+吸附+事件捕获
一.实现的效果是在限制范围内拖拽div+吸附+事件捕获. 这里需要理解的是事件捕获,这个事件捕获也是为了兼容div在拖拽过程中,文本不被选中这个问题. 如此良辰美景,拖拽也可以很洒脱哈.先看看图, 二 ...
用opacity方法来隐藏元素后，照样可以触发绑定在其身上的点击事件
今天运营小姐姐跑过来的时候,说要把一个左上角的"规则"图标隐藏掉,于是乎,我就用opacity:0;隐藏掉了元素,发布到了线上. 过了一会儿时间,运营小姐姐跑过来说,虽然规则图标看 ...
UnityUGUI[Slider]拖拽抬起事件
因为最近项目需要做个拖拽条,但是跟正常的不太一样所以需要一个拖拽抬起事件,但是Slider并没给自带的拖拽事件,而且Slider好像重写了EventSystem的IEndDragHandler的方法 ...
关于Echarts柱状图点击事件的实现方法charsjs柱状图点击事件
关于Echarts柱状图点击事件的实现方法 charsjs柱状图点击事件 ajax请求数据 var chartDom = document.getElementById('riskmain'); va ...
span标签的鼠标滑入提示_彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽...
一.基于鼠标事件的拖拽原理--onmousedown.onmousemove.onmouseup onmousedown 该事件会在鼠标按键被按下时触发支持该事件的HTML标签: html < ...
DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理
目录元素拖拽实现(点击拖动可视屏幕任意位置) DOM滚轮事件处理滚轮事件绑定滚轮事件方向滚轮事件兼容滚轮缩放图片案例实现特效动画缓冲运动单向缓冲运动反复缓冲运动简单的封装透明度处 ...
html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...
Qt鼠标拖拽窗口移动事件
QT中实现窗口的拖拽主要利用的是三个事件的重写 mousePressEvent 重写后检测到鼠标按下左键时记录按下的point的坐标以及拖拽的窗口的坐标point mouseMoveEvent 重写后 ...
Javascript(jQuery)中绑定页面上所有按钮点击事件的几种方式
方法一:使用document对象查找所有的按钮 //按照dom的方式添加事件处理function BindByDom() {try{var htmlBtns = document.getElement ...

事件绑定，取消冒泡，拖拽，点击，事件委托习题

事件绑定，取消冒泡，拖拽，点击，事件委托习题相关推荐

最新文章

热门文章

事件 绑定，取消冒泡，拖拽 ，点击，事件委托习题

事件 绑定，取消冒泡，拖拽 ，点击，事件委托习题相关推荐

最新文章

热门文章

事件绑定，取消冒泡，拖拽，点击，事件委托习题

事件绑定，取消冒泡，拖拽，点击，事件委托习题相关推荐