Deerua about Coding: последние заметки с тегом «event»

Javascript: bind keyboard

Sun, 18 Oct 2009 08:38:16 +0200

Забиндить клаву можно через DHTML параметр тэга onkeydown или onkeyup

<body onkeydown="displayKeyCode(event)">

В саму функцию displayKeyCode мы отправляем событие тэга (боди или импута), и дальше мы с него вынимаем код клавиши

charCode = (evt.which) ? evt.which : event.keyCode;

Строку с кода можно взять через стандартную функцию

String.fromCharCode(charCode);

У нас же есть ещё модификаторы, для них есть отдельный метод, но и по одиночке они отдают код тоже

evt.altKey
evt.ctrlKey
evt.shiftKey

Вот по сути и всё, код клавиш мы знаем, из кода получить символ можем, остаётся только глянуть в действии

Посмотреть Пример

Комментарии к заметке

Теги:
javascript > event

Context menu (right-click) on JavaScript

Thu, 28 May 2009 18:28:22 +0200

Для работы нам нужны 3 функции:

// Инициализация переменных
// Положение мыши
var mouse = {"x":0,"y":0};

// Дистанция до правого-нижнего края
var distance = {"right" : 0, "bottom" : 0};

// Обьект, который будет выскакивать как меню
var contextmenu = null;

// при загрузке страници, инициализируем ивенты
addGenericEvent(window,'load',onstart);



function onstart() {
	// биндим обьект меню
	contextmenu = $('thecontextmenu');
	// перехватываем мышку
	addGenericEvent(document,'mousemove',mousemove);
	// при клике где либо на странице, прячем меню
	addGenericEvent(document,'click',hide_contextmenu);

}



// функция которая покаызвает меню
function show_contextmenu(event) {
	// выбираем координаты положения меню
	// +30 исправляем длину offsetWidth для всех кроме ИЕ о_О
	// +2 если курсор слишком близок к правому или нижнему краю
	if (distance.right < 
		contextmenu.offsetWidth + (!window.event ? 30 : 0))
		// Если очень близко к правому краю, 
		// размещаем слева от указателя мыши
		contextmenu.style.left = 
			2 + mouse.x - contextmenu.offsetWidth+"px";	
	else contextmenu.style.left = mouse.x+"px";
	if (distance.bottom < contextmenu.offsetHeight)
		// Если очень близко к нижнему краю,
		// размещаем сверху над указателем мыши
		contextmenu.style.top = 
			2 + mouse.y - contextmenu.offsetHeight+"px";
	else contextmenu.style.top = mouse.y+"px";
	// показываем меню
	contextmenu.style.visibility = "visible";

	// улавливаем ивент когда пользователь 
	// любит клацнуть много раз по правой кнопке
	try {window.getSelection().collapseToStart();} catch (e) {}

	// прячем правое меню браузера
	event.cancelBubble = true;
	// и другие ивенты на клик правой кнопкой
	if (event.stopPropagation) event.stopPropagation(); 
	if (event.preventDefault) event.preventDefault();
	return false;

}


function hide_contextmenu() {
	contextmenu.style.visibility = "hidden";
	// прячем меню над мышкой, что бы лишнее 
	// пространство внизу страници не появлялось у ИЕ
	contextmenu.style.top = 
		(mouse.y - contextmenu.offsetHeight) + "px";

}


function mousemove(e) { 
	// параметры окна браузера
	// высота, ширина виевпорта и скролов
	var wnd = getWindowSizes();
	// Ловим положение курсора 
	if (e.clientX) // Moz
		mouse = {
			"x": e.clientX + wnd.sx, 
			"y": e.clientY + wnd.sy};
	else if (window.event) // IE 
		mouse = {
			"x": window.event.clientX + wnd.sx, 
			"y": window.event.clientY + wnd.sy};
	// считаем растояния к правому-нижнему углу
	distance.right = wnd.w - (mouse.x - wnd.sx);
	distance.bottom = wnd.h - (mouse.y - wnd.sy);

}

Посмотреть Пример

Комментарии к заметке

Теги:
javascript > event

Events (OnMouseOver, OnMouseOut) для DIVа (и вложеных елементов)

Wed, 06 May 2009 09:43:57 +0200

Если просто отобразить див по МаусОвер, то при наведении мыши, на любой из его внутренних елементов, он сразу исчезнет, а нам это не нужно ;)

Для того что бы этого небыло, используем простой код:

//Обьявляем ивент для всех браузеров и Експлорера	
function addHandler(node, evt, func) {
    if (node.addEventListener) {
        node.addEventListener(evt, func, false); 
    } else {
        node.attachEvent('on' + evt, func);     
    }
};
//Получаем список парент елементов обьекта - рекурсивно
function isParent(child, parent) {
    if (!child || !parent) {
        return false;
    }
    while (true) {
        if (child == parent) {
            return true;
        }
        if (child.parentElement) {
            child = child.parentElement;
        } else if (child.parentNode) {
            child = child.parentNode;
        } else {
            return false;
        }
    }
}
// Простой текст-заготовка
var preperedText = "<div style='position: absolute; width: 300px; background: #ccc;'>
<h1>Cool Popup</h1>\
<p>Here the sample Text (<b>in paragraph</b>)\
with <i>some</i> <u>styling</u> and picture above<br/>\
<img src='Astronaut.gif' title='Picture'></p></div>";
function zaatachim(container) {
	var injection = document.getElementById(container);
	// Вставляем в контейнер приготовленный текст
	// Текст можно получить и через Ajax ;)
	injection.innerHTML = preperedText;
	// Цепляем ивент на контейнер с Айди container
	addHandler(injection, 'mouseout', function(e) {
	    var target = e.relatedTarget || e.toElement;
	    if(!isParent(target, injection) ) {
	       	injection.innerHTML = '';
	    }
	});
	// если текст цепляем через Ajax, не забываем о задержках ;)
}

Комментарии к заметке

Теги:
javascript > event > OnMouseOver
html > tags > div

Add Generic Event (crossbrowser)

Sun, 14 Dec 2008 15:07:47 +0200

function addGenericEvent(source, trigger, func) {
  if (source.addEventListener) {
  	source.addEventListener(trigger,func,false);
  } else if (source.attachEvent) {
  	source.attachEvent("on"+trigger,func);
  }
}

source - window or document
trigger - any DHTML event widthout on (onLoad - load, onClick - click)
func - name of fucntion widthout any parameters, and brackets

Комментарии к заметке

Теги:
javascript > event
javascript

100% загрузка функции Javascript (без onload), после загрузки всей страницы

Fri, 27 Jun 2008 17:18:37 +0200

Javascript: Run some function after full page load

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') { window.onload = func;} 
  else {window.onload = function() { if (oldonload) {oldonload();}func();}}
}
addLoadEvent(function() {
  //Выполняем произвольную JS "команду" :)
  document.getElementById("footer").style.bottom = 0;
});

Комментарии к заметке

Теги:
javascript > event > onload