给对象添加事件

<!doctype html>
<html lang="en">
<head>
<title>javascript1</title>
<meta charset="utf-8"/>
</head>
<body>
<div>
<label >请输入您所在城市:</label>
<button id="button">确认填写</button>
<input type="text" id="incity"/>
<p>您所在的城市是:</p><p id="pcity"></p>
</div>
<script type="text/javascript">
(function(){
var output=document.getElementById("pcity");
var input=document.getElementById("incity");
document.getElementById("button").addEventListener(‘click‘,function(){
output.innerHTML=input.value;});

})();
</script>
</body>
</html>
时间: 2024-10-29 19:09:02

给对象添加事件的相关文章

(转)深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

深入理解JavaScript的闭包特性如何给循环中的对象添加事件 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head&g

javascript面向对象--观察者模式(为对象添加事件监听功能)

正文开始之前,有这么一个需求: >背景:宁静的夜晚,一天晚上,狗蛋(主人)睡得正香,侠盗高飞(小偷)突然造访. >事件:高飞正准备下手的时候,不料被旺财(狗)发现了,于是旺财叫了起来,狗蛋醒了,高飞逃走了. 分析需求后,可以发现有三个对象: 高飞(小偷) 旺财(狗) 狗蛋(主人) 创建对象的构造函数以及原型方法 //人的构造函数 function Person(name){ this.name=name; //首次创建实例时,为Person的原型添加共有的方法 if(!Person.proto

深入理解JavaScript的闭包特性如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. 1.  <!DOCTYPE HTML> 2.  <html> 3.  <head> 4.  <meta charset="utf

深入理解JavaScript的闭包特性 如何给循环中的对象添加事件

初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript的闭包特性. 有个网友问了个问题,如下的html,为什么点击所有的段落p输出都是5,而不是alert出对应的0,1,2,3,4. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> &

JS 给多个对象添加事件

废话不多说代码如下: 方法一: <em>v</em>ar pArys=document.getElementsByClassName("ps"); for(var i = 1; i <= pArys.length; i++){ //alert(i) var pAry = document.getElementById("p"+i); pAry.onclick=function(){ this.style.fontSize="3

给DOM元素添加事件

今天遇到一个问题:鼠标单击页面中的任意标签,弹出该标签的名称. 实现代码如下: <script type="text/javascript"> document.onclick = function(e){ var e = (e||event); var o = e["target"] || e["srcElement"]; alert(o.tagName.toLowerCase()); } </script> 即创建了一

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 7 // 如果存在e存在,直接返回,否则返回window.event 8 return e || window.event; 9 } 获取事件所对应的目标——兼容处理 1 /* 2 3 * 功能: 获取事件所对应的目标 4 5 * 参数: 表示常规浏览器的事件对象e 6 7 */ 8 9 function getTargetBy

添加事件及Event对象的兼容写法

一.事件流 事件流描述的是从页面中接受事件的顺序. IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流 1.事件冒泡 事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档). 2.事件捕获 事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件. 二.事件处理程序 1.HTML事件处理程序 2.DOM0级事件处理程序 3.DOM2级事件处理程序 DOM2级事件定义了两个方法:用于处理指定和删除事件处

添加事件时调用的方法的this又想指向其他对象

1.应用案例: var Mouse = function () { // Look! no that = this! this.position = [0, 0]; if (document.addEventListener) { document.addEventListener('mousemove', ?);   //this.move? } else if (document.attachEvent) { document.attachEvent("onmousemove",