浅析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 相关文章推荐
JS实现浏览器菜单命令
Sep 05 Javascript
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
jQuery选择器全集详解
Nov 24 Javascript
JS数组(Array)处理函数整理
Dec 07 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
使用Vue实现简单计算器
Feb 25 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
php ajax数据传输和响应方法
2018/08/21 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
通过python改变图片特定区域的颜色详解
2019/07/15 Python
Django REST framework 视图和路由详解
2019/07/19 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
python多线程同步实例教程
2019/08/11 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
wxPython实现整点报时
2019/11/18 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
什么是ESB?请介绍一下ESB?
2015/05/27 面试题
高校毕业生自我鉴定
2013/10/27 职场文书
预备党员承诺书
2014/03/25 职场文书
交通事故协议书
2014/04/15 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL