浅析js绑定事件的常用方法

浅析js绑定事件的常用方法 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JS事件绑定</title>
<script type="text/javascript">
/**
 * 绑定事件的方式：用事件属性绑定事件函数
 * 优点：1：完成行为的分离
 * 2：便于操作当事对象，因为function是作为on***的属性出现的，可直接用this引用当事对象。
 * 3:方便读取事件对象，事件触发时系统自动把事件对象传递给事件函数，已其一个来传
 */
  window.onload=function(){
  	 var k=document.getElementById('k').onclick=function(event){
	 var jj=document.getElementById('jj');
	   jj.style.top=event.clientX+'px';
		 jj.style.left=event.clientY+'px';
	 }
  } 

</script>
<style>
	#k{width:60px;height:80px; background-color:#80ffff;}
	#jj{width:60px ;height:80px;background-color:#ffff00;z-index:1000;position:absolute;}
</style>
</head>
<body>
<div id="k"></div>
<div id="jj"></div>
</body>
</html>

以上这篇浅析js绑定事件的常用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 浅谈JavaScript事件绑定的常用方法及其优缺点分析

    传统方式  element.onclick = function(e){ // ... };  1.  传统绑定的优点 非常简单和稳定,可以确保它在你使用的不同浏览器中运作一致 处理事件时,this关键字引用的是当前元素,这很有帮组 2. 传统绑定的缺点 传统方法只会在事件冒泡中运行,而非捕获和冒泡 一个元素一次只能绑定一个事件处理函数.新绑定的事件处理函数会覆盖旧的事件处理函数 事件对象参数(e)仅非IE浏览器可用 W3C方式  element.addEventListener('click'

  • 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所出现的错误.如果有多个javascript文件,那么极有可能出现多个window.onload事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了. IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件名称, 函数),解除绑定 DO

  • js添加绑定事件的方法

    先介绍js添加事件通用方法,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="p1">测试添加事件:firefox使用addEventListener,ie使用attachEvent<br> 点击此p标签

  • javascript事件绑定学习要点

    事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型),一种是现代事件绑定(DOM2级模型).现代事件绑定在传统绑定上提供了更强大更方便的功能. 一 传统事件绑定的问题 传统事件绑定中的内联模型不做讨论,基本很少去用.先来看一下脚本模型,脚本模型将一个函数赋值给一个事件处理函数.传统绑定如: window.onload=function(){ var box=document.getElementById('box'); box.onclick = function(){ alert('Le

  • 关于JavaScript中事件绑定的方法总结

    最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

  • 浅析js绑定事件的常用方法

    浅析js绑定事件的常用方法  <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http:

  • 浅析js中事件冒泡与事件捕获

    目录 01-事件冒泡 1.1-事件冒泡介绍 1.2-事件冒泡利用(事件委托) 1.3-事件冒泡影响 与 阻止事件冒泡 02-事件捕获 1.1-事件捕获介绍 1.2-事件三个阶段 01-事件冒泡 1.1-事件冒泡介绍 本小节知识点:介绍什么是事件冒泡 事件冒泡:如果一个元素的事件被触发,那么他的所有父级元素的同名事件也会被依次触发 元素->父元素->body->html->document->window 事件冒泡一直存在,只不过以前我们没有给父级元素加同名事件 <!DO

  • 理解JS绑定事件

    本文为大家详细分析了JS绑定事件,供大家参考,具体内容如下 绑定事件有兼容性问题,在IE早期版本中使用的是obj.attachEvent(),而其他浏览器使用的则是addEventListener(). 这两个方法都有三个参数,分别为:事件类型,事件函数,最后一个是布尔值,true或者是false. true表示在事件捕获阶段执行,false表示在事件冒泡阶段执行. 由于IE只支持事件冒泡,所以同大多数情况下,都是将事件处理程序添加到事件流的冒泡阶段,即默认为"false" 这样可以最

  • vue.js绑定事件监听器示例【基于v-on事件绑定】

    vue.js绑定事件监听器示例【基于v-on事件绑定】

    本文实例讲述了vue.js绑定事件监听器.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi

  • js绑定事件和解绑事件

    在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法  只支持IE678,不兼容其他浏览器 addEventListener方法   兼容火狐谷歌,不兼容IE8及以下 addEventListener方法 div.addEventListener('click',fn); div.addEventListener('click',fn2); function fn(){ console.log("春

  • js移除事件 js绑定事件实例应用

    复制代码 代码如下: /** * @description 事件绑定,兼容各浏览器 * @param target 事件触发对象 * @param type 事件 * @param func 事件处理函数 */ function addEvents(target, type, func) { if (target.addEventListener) //非ie 和ie9 target.addEventListener(type, func, false); else if (target.att

  • 关于js注册事件的常用方法

    不解释,看代码: 复制代码 代码如下: ;(function(){    //进行库封装,防止对象污染    window['cm']={};/**    *给对象注册事件    */    var addListener=function(element,type,fn){        if(typeof element == 'undefined') return false;        if(element.addEventListener){            element.

  • js绑定事件this指向发生改变的问题解决方法

    可对函数进行如下扩展 复制代码 代码如下: Function.prototype.bind = function(obj) { var _this = this; return function() { _this.apply(obj,arguments); } } 用法如下 复制代码 代码如下: var a = function(){ alert(this.title) }.bind(document); a(); 常用在这儿 复制代码 代码如下: function myalert() { t

  • JS中绑定事件顺序（事件冒泡与事件捕获区别）

    在JS中,绑定的事件默认的执行时间是在冒泡阶段执行,而非在捕获阶段(重要),这也是为什么当父类和子类都绑定了某个事件,会先调用子类绑定的事件,后调用父类的事件.直接看下面实例 <!Doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin:0;p

随机推荐