编程 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 相关文章推荐

图像替换新技术状态域方法

Jan 28 Javascript

jQuery 源码分析笔记(3) Deferred机制

Jun 19 Javascript

javascript完美拖拽的实现方法

Sep 29 Javascript

javascript打印html内容功能的方法示例

Nov 28 Javascript

ParseInt函数参数设置介绍

Jan 02 Javascript

调试代码导致IE出错的避免方法

Apr 04 Javascript

JS中位置与大小的获取方法

Nov 22 Javascript

jQuery展示表格点击变色、全选、删除

Jan 05 Javascript

Bootstrap表格使用方法详解

Feb 17 Javascript

ES6新特性七：数组的扩充详解

Apr 21 Javascript

浅析微信小程序自定义日历组件及flex布局最后一行对齐问题

Oct 29 Javascript

nuxt静态部署打包相对路径操作

Nov 06 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