js中关于简单事件的处理与浏览器对象
2013-10-09 09:47
567 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>简单的事件处理</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- <script language="text/javascript" src="hello.html">这个js的外部调用标签不能自结束</script> <link rel="stylesheet" type="text/css" href="./styles.css"> --> <script type="text/javascript"> function clickD(obj){ alert(obj.innerHTML); } function mouseD(obj){ obj.style.color = "#f00"; //当使用代码来设置样式时,如果css中通过-来表示的,都必须要用驼峰标示font-size -> fontSize obj.style.fontSize = "16px"; } function outD(obj){ obj.style.color = "#000"; obj.style.fontSize = "18px"; } //with的用法 with(document){ write("dddd<br/>"); } document.write("aaaa<br/>"); document.write("bbbb<br/>"); document.write("cccc<br/>"); </script> </head> <body> <div onclick="clickD(this)" style="cursor:pointer;">点击了试一下</div> <div onmouseover="mouseD(this)" onmouseout="outD(this)">鼠标移动来试试</div> </body> </html>
2,浏览器对象的例子:《涉及的是两个浏览器页面之间的传值》
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js01_hello</title> <meta name="author" content="Administrator" /> <script type="text/javascript"> // setTimeout("endWelcome()",5000); // function endWelcome() { // document.getElementById("welcome").style.display = "none"; // } </script> </head> <body> <div id="welcome">欢迎进行我们的网站</div> <a href="#" onclick="window.open('test02.html','aaa','width=300,height=300,resizable=0')">test02</a> <a href="#" onclick="window.open('test03.html','aaa','width=400,height=400,resizable=0')">test03</a> <br/> <a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">输入你祝福语</a> <a href="#" onclick="window.open('bless.html','aaa','width=600,height=300')">选择性别</a> <div id="bless"></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js01_hello</title> <meta name="author" content="Administrator" /> <script type="text/javascript"> function bless() { //获取输入的祝福语 var mb = document.getElementById("mb").value; //获取父类窗口 var p = window.opener; //获取父类窗口中的id为bless的div var pd = p.document.getElementById("bless"); //设置pd的值 pd.innerHTML = mb; //关闭当前窗口 window.close(); } </script> </head> <body> 输入祝福语:<input type="text" size="40" id="mb"/><input type="button" onclick="bless()" value="输入" /> </body> </html>
相关文章推荐
- js中事件的处理与浏览器对象示例介绍
- JS-DOM2级事件对象跨浏览器处理(已封装)
- js跨浏览器事件对象、事件处理程序
- js中事件的处理与浏览器对象示例介绍
- JS笔记-关于在DOM0级别中设置事件处理对象的思考
- js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
- js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
- Vue.js学习笔记——简单事件处理
- [事件处理] js实现的文本框内容发生改变立马触发事件简单介绍
- JS对象事件处理
- 【js事件详解】js事件封装函数,js跨浏览器事件处理机制
- 跨浏览器事件处理程序及跨浏览器事件对象(事件笔记)
- 【js事件详解】js事件封装函数,js跨浏览器事件处理机制
- JS处理键盘事件 兼容多浏览器
- 关于思考鼠标事件对象的按钮事件的跨浏览器的思路分析
- EventUtil 跨浏览器事件处理对象
- js事件处理、事件对象
- JavaScript跨浏览器处理事件方法(封装成对象)
- js跨浏览器的事件侦听器和事件对象的使用方法