编程 Javascript

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

Posted in Javascript onMay 15, 2016

浅析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绑定事件的常用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

web前端开发也需要日志

Dec 09 Javascript

再谈javascript图片预加载技术(详细演示)

Mar 12 Javascript

JS防止用户多次提交的简单代码

Aug 01 Javascript

jQuery使用andSelf()来包含之前的选择集

May 19 Javascript

JavaScript通过字典进行字符串翻译转换的方法

Mar 19 Javascript

JS拖动鼠标画出方框实现鼠标选区的方法

Aug 05 Javascript

JavaScript学习笔记之创建对象

Mar 25 Javascript

jquery动态创建div与input的实例代码

Oct 12 Javascript

在vue项目中引入highcharts图表的方法

Jan 21 Javascript

JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】

Feb 21 Javascript

vue项目中极验验证的使用代码示例

Dec 03 Javascript

js实现文字头像的生成代码

Mar 07 Javascript

js添加事件的通用方法推荐

May 15 #Javascript

js阻止默认浏览器行为与冒泡行为的实现代码

May 15 #Javascript

JQuery validate插件Remote用法大全

May 15 #Javascript

js阻止浏览器默认行为触发的通用方法(推荐)

May 15 #Javascript

Javascript自执行匿名函数(function() { })()的原理浅析

May 15 #Javascript

js阻止浏览器默认行为的简单实例

May 15 #Javascript

js添加绑定事件的方法

May 15 #Javascript