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

Javascript 相关文章推荐
跨浏览器的事件对象介绍
Jun 27 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
javascript常见操作汇总
Sep 03 Javascript
判断window.onload是否多次使用的方法
Sep 21 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
JS使用JSON作为参数实例分析
Jun 23 Javascript
Angular 数据请求的实现方法
May 07 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 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
You might like
ThinkPHP调试模式与日志记录概述
2014/08/22 PHP
作为PHP程序员你要知道的另外一种日志
2018/07/30 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
Track Image Loading效果代码分析
2007/08/13 Javascript
如何用ajax来创建一个XMLHttpRequest对象
2012/12/10 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
生产部主管岗位职责
2014/01/06 职场文书
最新奶茶店创业计划书
2014/01/25 职场文书
大学军训感言600字
2014/02/25 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
2014年科普工作总结
2014/12/06 职场文书