浅析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 相关文章推荐
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
Aug 05 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
React 使用browserHistory项目访问404问题解决
Jun 01 Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 Javascript
es6 symbol的实现方法示例
Apr 02 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 静态化实现代码
2009/03/20 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php实现分页工具类分享
2014/01/09 PHP
CI框架常用方法小结
2016/05/17 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
js实现网页图片延时加载 提升网页打开速度
2016/01/26 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JavaScript简单拖拽效果(1)
2017/05/17 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
vue脚手架搭建项目的兼容性配置详解
2018/07/17 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
原生JS实现pc端轮播图效果
2020/12/21 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python之os操作方法(详解)
2017/06/15 Python
python制作图片缩略图
2019/04/30 Python
Django中create和save方法的不同
2019/08/13 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
python的flask框架难学吗
2020/07/31 Python
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
教师实习自我鉴定
2013/12/11 职场文书
开学典礼决心书
2014/03/11 职场文书
婚前协议书范本
2014/04/15 职场文书
廉洁教育学习材料
2014/05/19 职场文书
Python中for后接else的语法使用
2021/05/18 Python
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis