JavaScript事件监听进阶两实例

第一阶:

<!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>
<title>JavaScript事件监听完整实例(含注释)</title>
<meta name="generator" content="editplus" />
<meta name="Keywords"

content="AddEventHandler,addEventListener,attachEvent,appendChild,getElementsByTagNamem,createElement,createTextNode,IE与FF兼

容性,JavaScript事件,JavaScript监听">
<script type="text/javascript">
var oEventUtil = new Object();
oEventUtil.AddEventHandler = function(oTarget,sEventType,fnHandler)
{
//IE和FF的兼容性处理
 
//如果是FF
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}
//如果是IE
else if(oTarget.attachEvent){
oTarget.attachEvent('on'+sEventType,fnHandler);
} else{
oTarget['on'+sEventType] = fnHandler;
}
};
 
//定义oT事件函数
var oT = function()
{
var oEvent = arguments[0];
var oTarget = oEvent.target || oEvent.srcElement;
alert(oTarget.tagName+'/n'+oTarget.innerHTML+'/n'+oEvent.type);
}
 
//页面加载时制造36个p,每个p里面显示的文字是Line + i
window.onload = function(){
for(var i = 0;i<36;i++)
{
var oP = document.createElement('p');
var oText = document.createTextNode('Line'+i);
oP.appendChild(oText);
//在文档的第一个div里面添加这些p
document.getElementsByTagName('div')[0].appendChild(oP);
}
 
//找到所有的p,并添加click的事件监听
var oPList = document.getElementsByTagName('p');
for(var i = 0;i<oPList.length;i++)
{
oEventUtil.AddEventHandler(oPList[i],'click',oT);
}
}
</script>
 
 
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
div
{
margin:10px auto;
width:690px;
border:solid 1px #000;
min-height:600px;
padding:20px;
}
 
div p
{
padding:4px;
margin-left:4px;
margin-top:4px;
border:solid 1px blue;
width:100px;
float:left;
}
pre{
margin:20px 0 0 0;
}
a
{
text-indent:4em;
}
</style>
</head>
<body >
<pre>
              代码来源网络。
              tiantian1980稍作整理并注释,更多相关文章请访问:
</pre>
<a href="http://blog.csdn.net/tiantian1980" target="_blank">更多在http://blog.csdn.net/tiantian1980</a>
 
<div>
</div>
</body>
</html>
第二阶:


<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>网页划词修改</title>

<script type="text/javascript">

function $( id ) {
 var obj = null;
 obj = document.getElementById(id);
 return obj ? obj : null;
}

function show( id ) {
 $(id).style.display = "block";
}

function hide( id ){
 $(id).style.display = "none";
}

function MouseEvent(e) {
    this.e = e || window.event;
    this.x = e.pageX || e.clientX;
    this.y = e.pageY || e.clientY;
    this.target = e.target || e.srcElement;
}

function addListener(type, callback) {
    if (document.addEventListener) {
        document.addEventListener(type, callback, false);
    } else if (document.attachEvent) {
        document.attachEvent("on"+type, callback, false);
    }
}

function removeListener (type, callback) {
    if (document.removeEventListener) {
        document.removeEventListener(type, callback, false);
    } else if (document.detachEvent) {
        document.detachEvent("on" + type, callback, false);
    }
}

function handleDown() {
 if($('selected')) {
  $('selected').outerHTML = $('selected').innerHTML;
  hide('editbox');
 }
   
    addListener("mouseup", handleUp);
}

function handleUp(e) {

 var e = new MouseEvent(e);
 removeListener("mouseup", handleUp);
 
 if (window.getSelection) {
  var str = window.getSelection().toString();
  
 } else if (document.getSelection) {
  var str = document.getSelection().toString();
  
 } else if (document.selection) {//IE
  var str = document.selection.createRange().text;
  
 }
 
 if(str != '' && e.target == $('edittext')) {
  
  e.target.innerHTML = e.target.innerHTML.replace(str, '<span id="selected" style="color: red">'+str+'</span>');
  
  show('editbox');
  $('editbox').style.left = e.x + "px";
  $('editbox').style.top = e.y + "px";
  $('textarea').value = str;
 }
}

function save() {
 var val = $('textarea').value;
 $('selected').outerHTML = val;
 hide('editbox');
}

</script>

</head>

<body background="bg.gif" scroll="no">


<div id="edittext" onmousedown="handleDown();" >

你有一双温柔的眼睛,你有善解人意的心灵,如果你愿意,请让我靠近

</div>

<div id="editbox" style = "background: #ddd; position: absolute;  border: 1px solid #aaa; width: 300px; height: 150px; padding: 5px; text-align: right; display: none;">
 <textarea id="textarea" style = "width:295px; height: 120px; border: 1px solid #aaa; margin-bottom: 3px;"></textarea>
 <input type='button' value="修改" onclick="save()" />
</div>

</body>
</html>

阅读更多
上一篇div背景图片不显示的问题
下一篇js浏览大图片
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭